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
["2000-01-01", 2, 6],
7
["2000-02-01", 2, 7],
8
["2000-03-01", 3, 10],
9
["2000-04-01", 5, 13],
10
["2000-05-01", 8, 17],
11
["2000-06-01", 11, 20],
12
["2000-07-01", 13, 22],
13
["2000-08-01", 13, 21],
14
["2000-09-01", 11, 19],
15
["2000-10-01", 8, 14],
16
["2000-11-01", 5, 10],
17
["2000-12-01", 5, 7],
18
19
["2001-01-01", 3, 7],
20
["2001-02-01", 4, 7],
21
["2001-03-01", 5, 8],
22
["2001-04-01", 7, 12],
23
["2001-05-01", 7, 14],
24
["2001-06-01", 13, 23],
25
["2001-07-01", 15, 24],
26
["2001-08-01", 11, 20],
27
["2001-09-01", 10, 20],
28
["2001-10-01", 7, 15],
29
["2001-11-01", 5, 11],
30
["2001-12-01", 1, 9],
31
32
["2002-01-01", 2, 6],
33
["2002-02-01", 6, 9],
34
["2002-03-01", 7, 11],
35
["2002-04-01", 9, 14],
36
["2002-05-01", 11, 17],
37
["2002-06-01", 18, 19],
38
["2002-07-01", 19, 22],
39
["2002-08-01", 15, 25],
40
["2002-09-01", 10, 22],
41
["2002-10-01", 8, 18],
42
["2002-11-01", 6, 15],
43
["2002-12-01", 4, 12],
44
45
["2003-01-01", 3, 6],
46
["2003-02-01", 6, 9],
47
["2003-03-01", 7, 8],
48
["2003-04-01", 11, 13],
49
["2003-05-01", 13, 17],
50
["2003-06-01", 16, 26],
51
["2003-07-01", 12, 24],
52
["2003-08-01", 15, 24],
53
["2003-09-01", 10, 20],
54
["2003-10-01", 9, 19],
55
["2003-11-01", 5, 18],
56
["2003-12-01", 5, 15],
57
58
["2004-01-01", 4, 9],
59
["2004-02-01", 7, 10],
60
["2004-03-01", 9, 10],
61
["2004-04-01", 10, 15],
62
["2004-05-01", 14, 19],
63
["2004-06-01", 15, 24],
64
["2004-07-01", 16, 29],
65
["2004-08-01", 12, 25],
66
["2004-09-01", 12, 20],
67
["2004-10-01", 8, 21],
68
["2004-11-01", 8, 15],
69
["2004-12-01", 6, 9]
70
]);
71
72
// map the data
73
mapping = table.mapAs();
74
mapping.addField('low', 1);
75
mapping.addField('high', 2);
76
77
// chart type
78
var chart = anychart.stock();
79
80
// set the series
81
var series = chart.plot(0).rangeArea(mapping);
82
series.name("Temperature Range");
83
84
chart.title('The temperature range in London \n2000-2004');
85
chart.container('container');
86
87
chart.draw();
88
});