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
['1086-01-01', null, 1710000],
7
['1190-01-01', null, 3100000],
8
['1220-01-01', null, 3970000],
9
['1250-01-01', null, 4230000],
10
['1279-01-01', null, 4430000],
11
['1290-01-01', null, 4750000],
12
['1315-01-01', null, 4690000],
13
['1325-01-01', null, 4120000],
14
['1348-01-01', null, 4810000],
15
['1351-01-01', null, 2600000],
16
['1377-01-01', null, 2500000],
17
['1400-01-01', null, 2080000],
18
['1430-01-01', null, 2020000],
19
['1450-01-01', null, 1900000],
20
['1490-01-01', null, 2140000],
21
['1522-01-01', null, 2350000],
22
['1541-01-01', null, 2830000],
23
['1560-01-01', null, 3200000],
24
['1600-01-01', null, 4110000],
25
['1650-01-01', null, 5310000],
26
['1700-01-01', null, 5200000],
27
['1790-01-01', 3929214, 5836464],
28
['1795-01-01', 4390561, 7002323],
29
['1800-01-01', 5236631, 7754875],
30
['1805-01-01', 5989289, 8182994],
31
['1810-01-01', 7239881, 8762178],
32
['1815-01-01', 8722382, 9598787],
33
['1820-01-01', 9638453, 10402143],
34
['1825-01-01', 10923857, 10887676],
35
['1830-01-01', 12866020, 12011830],
36
['1835-01-01', 15454230, 12778565],
37
['1840-01-01', 17069453, 13654914],
38
['1845-01-01', 19234543, 14567232],
39
['1850-01-01', 23191876, 15288885],
40
['1855-01-01', 28347121, 16783346],
41
['1860-01-01', 31443321, 18325052],
42
['1865-01-01', 34098412, 19998343],
43
['1870-01-01', 38558371, 21361235],
44
['1875-01-01', 44728322, 22975983],
45
['1880-01-01', 49371340, 24397385],
46
['1885-01-01', 53989443, 25898914],
47
['1890-01-01', 62979766, 27231229],
48
['1895-01-01', 71883243, 29232114],
49
['1900-01-01', 76212168, 30072180],
50
['1905-01-01', 85023411, 32209584],
51
['1910-01-01', 92228496, 33561235],
52
['1915-01-01', 100378232, 34001234],
53
['1920-01-01', 106021537, 35230225],
54
['1925-01-01', 118323005, 35958223],
55
['1930-01-01', 123202624, 37359045],
56
['1935-01-01', 126232034, 37799411],
57
['1940-01-01', 132164569, 38084321],
58
['1945-01-01', 144773641, 38422019],
59
['1950-01-01', 151325798, 38668830],
60
['1955-01-01', 160460555, 40698787],
61
['1960-01-01', 179323175, 41159213],
62
['1965-01-01', 188232951, 42289387],
63
['1970-01-01', 203211926, 43460525],
64
['1975-01-01', 215789873, 43899645],
65
['1980-01-01', 226545805, 45978080],
66
['1985-01-01', 239905274, 47223956],
67
['1990-01-01', 248709873, 48197972],
68
['1995-01-01', 272119084, 49066487],
69
['2000-01-01', 281421906, 49138831],
70
['2005-01-01', 299456285, 51121448],
71
['2010-01-01', 308745538, 53012456],
72
['2015-01-01', 318914629, 54986564]
73
]);
74
75
// map the data
76
mapping_usa = table.mapAs();
77
mapping_usa.addField('value', 1);
78
mapping_uk = table.mapAs();
79
mapping_uk.addField('value', 2);
80
81
// chart type
82
var chart = anychart.stock();
83
84
// set the US series
85
var series_usa = chart.plot(0).area(mapping_usa);
86
series_usa.name("USA");
87
88
// coloring
89
series_usa.fill("#CC9933");
90
series_usa.stroke("#FFCC33");
91
92
// set the UK series
93
var series_uk = chart.plot(1).area(mapping_uk);
94
series_uk.name("UK");
95
96
// hatch fill
97
series_uk.hatchFill("diagonal-cross");
98
99
chart.title('Stock Area Demo \nPopulation growth: USA vs UK');
100
101
// y-axis labels formatting
102
chart.plot(0).yAxis().labels().format(function() {
103
return this.value/1000000 + "m";
104
});
105
106
chart.container('container');
107
chart.draw();
108
});