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
['1790-01-01', 3929214],
7
['1795-01-01', 4390561],
8
['1800-01-01', 5236631],
9
['1805-01-01', 5989289],
10
['1810-01-01', 7239881],
11
['1815-01-01', 8722382],
12
['1820-01-01', 9638453],
13
['1825-01-01', 10923857],
14
['1830-01-01', 12866020],
15
['1835-01-01', 15454230],
16
['1840-01-01', 17069453],
17
['1845-01-01', 19234543],
18
['1850-01-01', 23191876],
19
['1855-01-01', 28347121],
20
['1860-01-01', 31443321],
21
['1865-01-01', 34098412],
22
['1870-01-01', 38558371],
23
['1875-01-01', 44728322],
24
['1880-01-01', 49371340],
25
['1885-01-01', 53989443],
26
['1890-01-01', 62979766],
27
['1895-01-01', 71883243],
28
['1900-01-01', 76212168],
29
['1905-01-01', 85023411],
30
['1910-01-01', 92228496],
31
['1915-01-01', 100378232],
32
['1920-01-01', 106021537],
33
['1925-01-01', 118323005],
34
['1930-01-01', 123202624],
35
['1935-01-01', 126232034],
36
['1940-01-01', 132164569],
37
['1945-01-01', 144773641],
38
['1950-01-01', 151325798],
39
['1955-01-01', 160460555],
40
['1960-01-01', 179323175],
41
['1965-01-01', 188232951],
42
['1970-01-01', 203211926],
43
['1975-01-01', 215789873],
44
['1980-01-01', 226545805],
45
['1985-01-01', 239905274],
46
['1990-01-01', 248709873],
47
['1995-01-01', 272119084],
48
['2000-01-01', 281421906],
49
['2005-01-01', 299456285],
50
['2010-01-01', 308745538],
51
['2015-01-01', 318914629]
52
]);
53
54
// map the data
55
mapping = table.mapAs();
56
mapping.addField('value', 1);
57
58
// chart type
59
var chart = anychart.stock();
60
61
// set the series
62
series = chart.plot(0).area(mapping);
63
series.name("USA population growth");
64
65
chart.title('Stock Area Demo: USA population growth');
66
67
// y-axis labels formatting
68
chart.plot(0).yAxis().labels().format("{%value}{scale:(1000000)|(m)}");
69
70
71
// define the grouping
72
grouping = chart.grouping();
73
74
// set the levels of grouping
75
grouping.levels([
76
{unit: 'year', count: 10},
77
{unit: 'year', count: 15},
78
{unit: 'year', count: 20}
79
]);
80
81
chart.container('container');
82
chart.draw();
83
});