HTMLcopy
1
<button id="addItemButton" onclick="addItem()">Add Item</button>
2
<button id="removeItemButton" onclick="removeItem()">Remove Item</button>
3
<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
// create data
4
data = [
5
{x: "John Doe", value: 1},
6
{x: "Richard Roe", value: 1},
7
{x: "Larry Loe", value: 1},
8
{x: "Marta Moe", value: 1},
9
{x: "Jane Poe", value: 1},
10
{x: "Norma Noe", value: 1},
11
{x: "William Woe", value: 1}
12
];
13
14
newData = data.slice(0, 4);
15
16
// create a chart and set the data
17
chart = anychart.pie(newData);
18
19
// set the chart title
20
chart.title("Legend: Size (Expandable)\n\n" +
21
"Max Height = 30%, Max Width = 50%");
22
23
// set the maximum height and width of the legend
24
chart.legend().maxHeight("30%");
25
chart.legend().maxWidth("50%");
26
27
// set the layout of the legend
28
chart.legend().itemsLayout("horizontal-expandable")
29
30
// set the container id
31
chart.container("container");
32
33
// initiate drawing the chart
34
chart.draw();
35
});
36
37
// add items to the chart
38
function addItem() {
39
newData = newData.concat(data[newData.length]);
40
chart.data(newData);
41
if (newData.length == data.length) {
42
document.getElementById("addItemButton").disabled = true;
43
}
44
document.getElementById("removeItemButton").disabled = false;
45
}
46
47
// remove items from the chart
48
function removeItem() {
49
newData = newData.slice(0, newData.length - 1);
50
chart.data(newData);
51
if (newData.length == 1) {
52
document.getElementById("removeItemButton").disabled = true;
53
}
54
document.getElementById("addItemButton").disabled = false;
55
}