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
// create a chart
3
var chart = anychart.column();
4
5
// enable the scroller
6
chart.xScroller(true);
7
8
// change the scroller orientation
9
chart.xScroller().position("before-axes");
10
11
// define zoom setting
12
chart.xZoom().setToPointsCount(5);
13
14
// create a series
15
var series = chart.column(getData());
16
series.name("Total support requests");
17
18
// set chart settings
19
chart.xAxis().title("Hours");
20
chart.yAxis().title("Support requests");
21
chart.title("Amount of support requests by hours");
22
23
// display a chart
24
chart.container("container");
25
chart.draw();
26
});
27
28
// get data function
29
function getData(){
30
return [
31
["00:00", 10],
32
["01:00", 4],
33
["02:00", 17],
34
["03:00", 20],
35
["04:00", 20],
36
["05:00", 16],
37
["06:00", 35],
38
["07:00", 6],
39
["08:00", 15],
40
["09:00", 19],
41
["10:00", 25],
42
["11:00", 34],
43
["12:00", 42],
44
["13:00", 14],
45
["14:00", 50],
46
["15:00", 25],
47
["16:00", 34],
48
["17:00", 40],
49
["18:00", 64],
50
["19:00", 48],
51
["20:00", 22],
52
["21:00", 37],
53
["22:00", 53],
54
["23:00", 62]
55
];
56
}