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('x');
5
table.addData([
6
{'x': "2004-07-01", 'low': 23.65, 'high': 23.68},
7
{'x': "2004-07-02", 'low': 23.14, 'high': 23.21},
8
{'x': "2004-07-06", 'low': 22.68, 'high': 22.71},
9
{'x': "2004-07-07", 'low': 22.41, 'high': 22.74},
10
{'x': "2004-07-08", 'low': 22.29, 'high': 22.65},
11
{'x': "2004-07-09", 'low': 22.27, 'high': 22.58},
12
{'x': "2004-07-12", 'low': 22.16, 'high': 22.30},
13
{'x': "2004-07-13", 'low': 22.35, 'high': 22.62},
14
{'x': "2004-07-14", 'low': 22.30, 'high': 22.53},
15
{'x': "2004-07-15", 'low': 22.17, 'high': 22.39},
16
{'x': "2004-07-16", 'low': 22.39, 'high': 22.41},
17
{'x': "2004-07-19", 'low': 21.42, 'high': 21.75},
18
{'x': "2004-07-20", 'low': 21.42, 'high': 21.91},
19
{'x': "2004-07-21", 'low': 22.21, 'high': 22.27},
20
{'x': "2004-07-22", 'low': 21.20, 'high': 21.53},
21
{'x': "2004-07-23", 'low': 21.26, 'high': 21.28},
22
{'x': "2004-07-26", 'low': 20.84, 'high': 21.03},
23
{'x': "2004-07-27", 'low': 20.57, 'high': 20.79},
24
{'x': "2004-07-28", 'low': 20.55, 'high': 20.69},
25
{'x': "2004-07-29", 'low': 20.76, 'high': 20.98},
26
{'x': "2004-07-30", 'low': 20.82, 'high': 21.30},
27
{'x': "2004-08-02", 'low': 20.60, 'high': 21.24},
28
{'x': "2004-08-03", 'low': 21.13, 'high': 21.23},
29
{'x': "2004-08-04", 'low': 20.62, 'high': 21.18},
30
{'x': "2004-08-05", 'low': 21.12, 'high': 21.23},
31
{'x': "2004-08-06", 'low': 20.22, 'high': 20.60},
32
{'x': "2004-08-09", 'low': 20.02, 'high': 20.22},
33
{'x': "2004-08-10", 'low': 20.31, 'high': 20.47},
34
{'x': "2004-08-11", 'low': 18.60, 'high': 18.65},
35
{'x': "2004-08-12", 'low': 18.25, 'high': 18.35},
36
{'x': "2004-08-13", 'low': 18.23, 'high': 18.23}
37
]);
38
39
// map the data
40
mapping = table.mapAs({'x': 'x', 'low': 'low', 'high': 'high'});
41
42
// chart type
43
var chart = anychart.stock();
44
45
// set the series
46
var series = chart.plot(0).rangeStepArea(mapping);
47
series.name("Experiment 2");
48
49
chart.title('Temperature dispersion');
50
chart.container('container');
51
52
chart.draw();
53
});