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
// data
4
var dataSet = anychart.data.set([
5
{x: "P1", value: 10},
6
{x: "P2", value: 2},
7
{x: "P3", value: 15},
8
{x: "P4", value: 10},
9
{x: "P5", value: 15}
10
]);
11
12
// set chart type
13
var chart = anychart.area();
14
15
chart.title().text("Click on the Button to Append a Point ");
16
17
// set data
18
var area = chart.splineArea(dataSet);
19
20
// first index for new point
21
var indexSetter = 6;
22
23
// create new button
24
var triggerButton = document.createElement("div");
25
26
// set button style
27
triggerButton.style.top = "5px";
28
triggerButton.style.right = "5px";
29
triggerButton.style.width = "auto";
30
triggerButton.style.height = "auto";
31
triggerButton.style.backgroundColor = "#444444";
32
triggerButton.style.color = "white";
33
triggerButton.style.position = "absolute";
34
triggerButton.style.zIndex = 2;
35
triggerButton.style.transition = "0.5s";
36
triggerButton.style.textAlign = "center";
37
triggerButton.style.border = "3px solid #444444";
38
triggerButton.style.borderRadius = "7px 7px 7px 7px";
39
triggerButton.style.fontSize = "18px";
40
triggerButton.style.cursor = "pointer";
41
triggerButton.style.MozUserSelect= "none";
42
triggerButton.style.KhtmlUserSelect= "none";
43
triggerButton.style.WebkitUserSelect= "none";
44
triggerButton.style.userSelect= "none";
45
triggerButton.innerHTML = "Append Point";
46
triggerButton.onclick = function() {
47
addPoint();
48
};
49
50
// append button to container
51
container.appendChild(triggerButton);
52
53
// function, if listener triggers
54
function addPoint(e) {
55
// append data
56
dataSet.append({
57
58
// x value
59
x: "new P" + indexSetter,
60
61
// random value from 1 to 100
62
value : Math.floor((Math.random() * 100)+ 1)
63
});
64
indexSetter++;
65
}
66
67
// set container and draw chart
68
chart.container("container").draw();
69
});