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: '2000-01-01', low: 2, high: 6},
7
{x: '2000-02-01', low: 2, high: 7},
8
{x: '2000-03-01', low: 3, high: 10},
9
{x: '2000-04-01', low: 5, high: 13},
10
{x: '2000-05-01', low: 8, high: 17},
11
{x: '2000-06-01', low: 11, high: 20},
12
{x: '2000-07-01', low: 13, high: 22},
13
{x: '2000-08-01', low: 13, high: 21},
14
{x: '2000-09-01', low: 11, high: 19},
15
{x: '2000-10-01', low: 8, high: 14},
16
{x: '2000-11-01', low: 5, high: 10},
17
{x: '2000-12-01', low: 5, high: 7},
18
{x: '2001-01-01', low: 3, high: 7},
19
{x: '2001-02-01', low: 4, high: 7},
20
{x: '2001-03-01', low: 5, high: 8},
21
{x: '2001-04-01', low: 7, high: 12},
22
{x: '2001-05-01', low: 7, high: 14},
23
{x: '2001-06-01', low: 13, high: 23},
24
{x: '2001-07-01', low: 15, high: 24},
25
{x: '2001-08-01', low: 11, high: 20},
26
{x: '2001-09-01', low: 10, high: 20},
27
{x: '2001-10-01', low: 7, high: 15},
28
{x: '2001-11-01', low: 5, high: 11},
29
{x: '2001-12-01', low: 1, high: 9},
30
{x: '2002-01-01', low: 2, high: 6},
31
{x: '2002-02-01', low: 6, high: 9},
32
{x: '2002-03-01', low: 7, high: 11},
33
{x: '2002-04-01', low: 9, high: 14},
34
{x: '2002-05-01', low: 11, high: 17},
35
{x: '2002-06-01', low: 18, high: 19},
36
{x: '2002-07-01', low: 19, high: 22}
37
]);
38
39
// map the data
40
mapping = table.mapAs({x:'x', high:'high', low: 'low'});
41
42
// chart type
43
var chart = anychart.stock();
44
45
// set the series
46
var series = chart.plot(0).rangeArea(mapping);
47
series.name("Temperature Range");
48
49
chart.title('The temperature range in London \n2000-2004');
50
51
// display the chart
52
chart.container('container');
53
chart.draw();
54
});