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
// set the data
4
table = anychart.data.table();
5
table.addData([
6
['2010-01-01', 5.8, 7.9],
7
['2010-02-01', 4.6, 6.1],
8
['2010-03-01', 5.9, 8.1],
9
['2010-04-01', 7.8, 10.7],
10
['2010-05-01', 10.5, 13.7],
11
['2010-06-01', 13.8, 17],
12
['2010-07-01', 16.5, 18.5],
13
['2010-08-31', 17.8, 19],
14
['2010-09-01', 15.4, 17.8],
15
['2010-10-01', 12.7, 15.3],
16
['2010-11-01', 9.8, 13],
17
['2010-12-01', 9, 10.1],
18
['2010-01-01', 5.7, 8],
19
['2011-02-01', 6, 8.4],
20
['2011-03-01', 6, 9.5],
21
['2011-04-01', 7.7, 10],
22
['2011-05-01', 8.9, 11.1],
23
['2011-06-01', 10.2, 16.3],
24
['2011-07-01', 14.3, 19],
25
['2011-08-01', 16, 20.1],
26
['2011-09-01', 15.8, 18.9],
27
['2011-10-01', 11.4, 13.2],
28
['2011-11-01', 8.3, 10],
29
['2011-12-01', 6.5, 8.7],
30
['2012-01-01', 7.2, 8.6],
31
['2012-02-01', 5.3, 7.4],
32
['2012-03-01', 6.1, 9.4],
33
['2012-04-01', 8.7, 11.2],
34
['2012-05-21', 10.4, 14.3],
35
['2012-06-22', 13.5, 17.1],
36
['2012-07-23', 15.8, 19.7],
37
['2012-08-24', 17.8, 21],
38
['2012-09-25', 15.1, 17.3],
39
['2012-10-26', 12.6, 15.9],
40
['2012-11-27', 10.2, 13.8],
41
['2012-12-28', 8.3, 9.6]
42
]);
43
44
// map the data
45
mapping = table.mapAs();
46
mapping.addField('low', 1);
47
mapping.addField('high', 2);
48
49
// chart type
50
var chart = anychart.stock();
51
52
// set the series
53
var series = chart.plot(0).rangeColumn(mapping);
54
series.name("Water temperature in London in 2010-2012");
55
56
chart.title('Water Temperature');
57
58
chart.container('container');
59
chart.draw();
60
});