HTMLcopy
1
<button id="streamButton" onclick="startStream()">Start Stream</button>
2
<div id="container"></div>
CSScopy
15
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
button {
8
margin: 10px 0 0 10px;
9
}
10
#container {
11
position: absolute;
12
width: 100%;
13
top: 35px;
14
bottom: 0;
15
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// data
4
dataSet = anychart.data.set([
5
{x: "P1", value: 100},
6
{x: "P2", value: 200},
7
{x: "P3", value: 15},
8
{x: "P4", value: 130},
9
{x: "P5", value: 153},
10
{x: "P6", value: 120},
11
{x: "P7", value: 151},
12
{x: "P8", value: 58},
13
{x: "P9", value: 19},
14
{x: "P10", value: 135},
15
{x: "P11", value: 170},
16
{x: "P12", value: 195},
17
{x: "P13", value: 22},
18
{x: "P14", value: 175},
19
{x: "P15", value: 120}
20
]);
21
22
// set chart type
23
var chart = anychart.line();
24
25
chart.title().text("Click on Chart to Add a Point ");
26
27
// set data
28
chart.spline(dataSet).markers(null);
29
30
// disable stagger mode. Only one line for x axis labels
31
chart.xAxis().staggerMode(false);
32
33
// set container and draw chart
34
chart.container("container").draw();
35
36
// first index for new point
37
indexSetter = (dataSet.mapAs().getRowsCount())+1;
38
});
39
40
function startStream() {
41
42
// adjust button content
43
var streamButton = document.getElementById("streamButton");
44
streamButton.innerHTML = "Stop" + "\nstream";
45
46
// set interval of data stream
47
var myVar = setInterval(
48
49
// data streaming itself
50
function() {
51
52
// append data
53
dataSet.append({
54
55
// x value
56
x: "P" + indexSetter,
57
58
// random value from 1 to 500
59
value : Math.floor((Math.random() * 500)+ 1)
60
});
61
62
// removes first point
63
dataSet.remove(0);
64
indexSetter++;
65
}, 200 // interval
66
);
67
68
streamButton.onclick = function() {
69
70
// clears interval which stops streaming
71
clearInterval(myVar);
72
streamButton.onclick = function () {
73
startStream();
74
};
75
streamButton.innerHTML = "Start" + "\nstream";
76
};
77
};