HTMLcopy
1
<button onclick="animation()">Enable animation</button>
2
<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
var chart;
2
anychart.onDocumentReady(function () {
3
var dataSet = anychart.data.set([
4
['1986', 41, 36],
5
['1987', 37, 34],
6
['1988', 48, 47],
7
['1989', 41, 39],
8
['1990', 39, 36],
9
['1991', 34, 31],
10
]);
11
12
var data1 = dataSet.mapAs({'x': 0, 'value': 1});
13
var data2 = dataSet.mapAs({'x': 0, 'value': 2});
14
15
chart = anychart.column();
16
chart.column(data1);
17
chart.column(data2);
18
chart.title('Set the type of event to start/end the animation');
19
chart.container('container');
20
chart.draw();
21
});
22
23
function animation() {
24
chart.animation(true);
25
26
// Set event type to start the animation
27
chart.listen('animationStart', function(e) {
28
chart.getSeries(0).getPoint(0).selected(true);
29
});
30
31
// Set event type to finish the animation
32
chart.listen('animationEnd', function(e) {
33
chart.getSeries(0).getPoint(5).selected(true);
34
});
35
}