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