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
var data = [
3
{"x": 2015, "value": 2195081, "drillDown": [
4
{"x": "Q1", "value": 792026},
5
{"x": "Q2", "value": 610501},
6
{"x": "Q3", "value": 441843},
7
{"x": "Q4", "value": 350711}
8
]},
9
{"x": 2016, "value": 3257447, "drillDown": [
10
{"x": "Q1", "value": 1378786},
11
{"x": "Q2", "value": 571063},
12
{"x": "Q3", "value": 510493},
13
{"x": "Q4", "value": 797105}
14
]},
15
{"x": 2017, "value": 1963407, "drillDown": [
16
{"x": "Q1", "value": 499299},
17
{"x": "Q2", "value": 649963},
18
{"x": "Q3", "value": 571176},
19
{"x": "Q4", "value": 242969}
20
]}
21
];
22
23
// create column chart
24
var chart = anychart.column(data);
25
26
// configure axis labels
27
chart.yAxis().labels().format('${%value}{scale:(1000)(1000)|(k)(m)}');
28
// tune tooltips format
29
chart.tooltip().format('${%value}');
30
// tune interactivity
31
chart.interactivity().selectionMode('none');
32
33
// configire drilldown
34
chart.listen('pointClick', function (e) {
35
if (e.point.get('drillDown')) {
36
chart.getSeries(0).data(e.point.get('drillDown'));
37
}
38
else {
39
chart.getSeries(0).data(data);
40
}
41
});
42
43
// set container id and display chart
44
chart.container('container').draw();
45
});