HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function() {
2
3
var dataSet = anychart.data.set([
4
{x: "P1", value: 100},
5
{x: "P2", value: 200},
6
{x: "P3", value: 15},
7
{x: "P4", value: 130},
8
{x: "P5", value: 153},
9
{x: "P6", value: 120},
10
{x: "P7", value: 151},
11
{x: "P8", value: 58},
12
{x: "P9", value: 19},
13
{x: "P10", value: 135},
14
{x: "P11", value: 170},
15
{x: "P12", value: 195},
16
{x: "P13", value: 22},
17
{x: "P14", value: 175},
18
{x: "P15", value: 120}
19
]);
20
21
// set chart type
22
var chart = anychart.line();
23
24
chart.title("Click on the Chart to Add New Points");
25
26
// set data
27
chart.spline(dataSet);
28
29
// disable stagger mode. Only one line for x axis labels
30
var xAxis = chart.xAxis();
31
xAxis.staggerMode(false);
32
33
// first index for new point
34
var indexSetter = 16;
35
36
chart.listen("click", function(){
37
dataSet.append({
38
// x value
39
x: "P" + indexSetter,
40
41
// random value from 1 to 500
42
value : Math.floor((Math.random() * 500)+ 1)
43
});
44
indexSetter++;
45
dataSet.remove(0);
46
});
47
48
// set container and draw chart
49
chart.container("container");
50
chart.draw();
51
});