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
// create a chart
4
var chart = anychart.line();
5
6
// Zooms series by defined points count.
7
chart.xZoom().setToPointsCount(10, true);
8
9
// prevent the scrolling while the button is not released yet
10
chart.xZoom().continuous(false);
11
12
// enable the scroller
13
chart.xScroller(true);
14
15
// create a series
16
var series = chart.column(getData());
17
series.name("New users");
18
19
// create a chart settings
20
chart.xAxis().title("Month");
21
chart.yAxis().title("New users");
22
chart.title("New internet users \nPrevent scrolling");
23
24
// display a chart
25
chart.container("container");
26
chart.draw();
27
});
28
29
// get data function
30
function getData(){
31
return [
32
["Jan 15", 2094],
33
["Feb 15", 1865],
34
["Mar 15", 2051],
35
["Apr 15", 2301],
36
["May 15", 1509],
37
["Jun 15", 1044],
38
["Jul 15", 1935],
39
["Aug 15", 2109],
40
["Sep 15", 2002],
41
["Oct 15", 1609],
42
["Nov 15", 1634],
43
["Dec 15", 2403],
44
["Jan 16", 2105],
45
["Feb 16", 2844],
46
["Mar 16", 2523],
47
["Apr 16", 2766],
48
["May 16", 1985],
49
["Jun 16", 1646],
50
["Jul 16", 934],
51
["Aug 16", 1104],
52
["Sep 16", 1824],
53
["Oct 16", 1534],
54
["Nov 16", 1911],
55
["Dec 16", 2323]
56
]
57
}