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 data = anychart.data.set([
5
["John", 10000, 12000],
6
["Jake", 12000, 15000],
7
["Peter", 18000, 16000],
8
["James", 11000, 13000],
9
["Mary", 9000, 19000]
10
]);
11
12
// map data for the each series
13
var Sales2003 = data.mapAs({x: [0], value: [1]});
14
var Sales2004 = data.mapAs({x: [0], value: [2]});
15
16
// chart type
17
var chart = anychart.column();
18
19
// switching the select mode to multi
20
var interactivity = chart.interactivity();
21
interactivity.selectionMode("multiselect");
22
23
// set data
24
var series_1 = chart.column(Sales2003);
25
series_1.name("Sales in 2013");
26
series_1.xPointPosition(0.5);
27
28
var series_2 = chart.column(Sales2004);
29
series_2.name("Sales in 2014");
30
31
series_1.fill("#E0F08F");
32
series_2.fill("#29ADC2");
33
series_1.selectHatchFill("brick");
34
series_2.selectHatchFill("brick");
35
series_1.stroke("none");
36
series_2.stroke("none");
37
38
// chart title
39
chart.title("Multi-select");
40
41
// set axes titles
42
var xAxis = chart.xAxis();
43
xAxis.title("Retail Channel");
44
var yAxis = chart.yAxis();
45
yAxis.title("Sales");
46
47
// enable legend
48
chart.legend(true);
49
50
// draw
51
chart.container("container");
52
chart.draw();
53
});