HTMLcopy
1
<button onclick="add()">Add Series</button>
2
<button onclick="remove()">Remove Series</button>
3
<button onclick="removeAll()">Remove All Series</button>
4
<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
data = anychart.data.set([
5
["Department Stores", 637166, 737166, 813000, 719242, 791736, 837164, 918364, 819363, 864213],
6
["Discount Stores", 721630, 537166, 128013, 471946, 385638, 764426, 237561, 628452 ,721645],
7
["Men's/Women's Specialty Stores", 148662, 188662, 194912, 573173, 384617, 481627, 615373, 274618 ,471846],
8
["Juvenile Specialty Stores", 78662, 178662, 612037, 589275, 128614, 201385, 171284, 317394 ,172846],
9
["All other outlets", 90000, 89000, 375913, 183613, 100847, 92714, 192483, 137184 ,99128]
10
]);
11
12
// remapping data
13
var Sales2003 = data.mapAs({x: 0, value: 1});
14
var Sales2004 = data.mapAs({x: 0, value: 2});
15
var Sales2005 = data.mapAs({x: 0, value: 3});
16
17
// create a chart
18
chart = anychart.cartesian();
19
20
// set default series type
21
chart.defaultSeriesType("column");
22
23
// create multiple series
24
chart.addSeries(Sales2003, Sales2004, Sales2005);
25
26
// set title
27
chart.title("Add/Remove Series sample");
28
29
// set axes titles
30
var xAxis = chart.xAxis();
31
xAxis.title("Retail Channel");
32
var yAxis = chart.yAxis();
33
yAxis.title("Sales");
34
35
// draw chart
36
chart.container("container");
37
chart.draw();
38
});
39
40
function add(){
41
if (chart.getSeriesCount()<9)
42
chart.addSeries(data.mapAs({x: 0, value: [chart.getSeriesCount()+1]}));
43
};
44
45
function remove(){
46
if (chart.getSeriesCount()>0)
47
chart.removeSeriesAt(chart.getSeriesCount()-1);
48
};
49
50
function removeAll(){
51
chart.removeAllSeries();
52
};