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:'1790-01-01', value:3},
7
{x:'1795-01-01', value:4},
8
{x:'1800-01-01', value:5},
9
{x:'1805-01-01', value:5},
10
{x:'1810-01-01', value:7},
11
{x:'1815-01-01', value:8},
12
{x:'1820-01-01', value:9},
13
{x:'1825-01-01', value:10},
14
{x:'1830-01-01', value:12},
15
{x:'1835-01-01', value:15},
16
{x:'1840-01-01', value:17},
17
{x:'1845-01-01', value:19},
18
{x:'1850-01-01', value:23},
19
{x:'1855-01-01', value:28},
20
{x:'1860-01-01', value:31},
21
{x:'1865-01-01', value:34},
22
{x:'1870-01-01', value:38},
23
{x:'1875-01-01', value:44},
24
{x:'1880-01-01', value:49},
25
{x:'1885-01-01', value:53},
26
{x:'1890-01-01', value:62},
27
{x:'1895-01-01', value:71},
28
{x:'1900-01-01', value:76},
29
{x:'1905-01-01', value:85},
30
{x:'1910-01-01', value:92},
31
{x:'1915-01-01', value:100},
32
{x:'1920-01-01', value:106},
33
{x:'1925-01-01', value:118},
34
{x:'1930-01-01', value:123},
35
{x:'1935-01-01', value:126},
36
{x:'1940-01-01', value:132}
37
]);
38
39
// map the data
40
mapping = table.mapAs({x:'x', value:'value'});
41
42
// chart type
43
var chart = anychart.stock();
44
45
// set the series
46
var series = chart.plot(0).splineArea(mapping);
47
series.name("Population growth");
48
49
chart.title('Stock Area Demo: Population growth');
50
51
chart.container('container');
52
chart.draw();
53
});