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("Move the Mouse Over the Chart to Add New Points\nDoubleClick to Remove Listeners");
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
// create a function what to listen and then unlisten
37
var func_listen = function(){
38
dataSet.append({
39
// x value
40
x: "P" + indexSetter,
41
42
// random value from 1 to 500
43
value : Math.floor((Math.random() * 500)+ 1)
44
});
45
indexSetter++;
46
dataSet.remove(0);
47
};
48
49
// add a listener
50
chart.listen("mouseMove", func_listen);
51
52
var counter = 0;
53
54
// add a listener
55
chart.listen("click", function(){
56
counter++;
57
chart.title("Clicks: "+ counter);
58
});
59
60
// remove all listeners
61
chart.listen("dblclick", function(){
62
chart.removeAllListeners(); // click twice on any range bar to see the result
63
});
64
65
// set container and draw chart
66
chart.container("container");
67
chart.draw();
68
69
});