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, 1710],
7
['1190-01-01', null, 3100],
8
['1220-01-01', null, 3970],
9
['1250-01-01', null, 4230],
10
['1279-01-01', null, 4430],
11
['1290-01-01', null, 4750],
12
['1315-01-01', null, 4690],
13
['1325-01-01', null, 4120],
14
['1348-01-01', null, 4810],
15
['1351-01-01', null, 2600],
16
['1377-01-01', null, 2500],
17
['1400-01-01', null, 2080],
18
['1430-01-01', null, 2020],
19
['1450-01-01', null, 1900],
20
['1490-01-01', null, 2140],
21
['1522-01-01', null, 2350],
22
['1541-01-01', null, 2830],
23
['1560-01-01', null, 3200],
24
['1600-01-01', null, 4110],
25
['1650-01-01', null, 5310],
26
['1700-01-01', null, 5200],
27
['1790-01-01', 3929, 5836],
28
['1795-01-01', 4390, 7002],
29
['1800-01-01', 5236, 7754],
30
['1805-01-01', 5989, 8182],
31
['1810-01-01', 7239, 8762],
32
['1815-01-01', 8722, 9598],
33
['1820-01-01', 9638, 10402],
34
['1825-01-01', 10923, 10887],
35
['1830-01-01', 12866, 12011],
36
['1835-01-01', 15454, 12778],
37
['1840-01-01', 17069, 13654],
38
['1845-01-01', 19234, 14567],
39
['1850-01-01', 23191, 15288],
40
['1855-01-01', 28347, 16783],
41
['1860-01-01', 31443, 18325],
42
['1865-01-01', 34098, 19998],
43
['1870-01-01', 38558, 21361],
44
['1875-01-01', 44728, 22975],
45
['1880-01-01', 49371, 24397],
46
['1885-01-01', 53989, 25898],
47
['1890-01-01', 62979, 27231],
48
['1895-01-01', 71883, 29232],
49
['1900-01-01', 76212, 30072],
50
['1905-01-01', 85023, 32209],
51
['1910-01-01', 92228, 33561],
52
['1915-01-01', 100378, 34001],
53
['1920-01-01', 106021, 35230],
54
['1925-01-01', 118323, 35958],
55
['1930-01-01', 123202, 37359],
56
['1935-01-01', 126232, 37799],
57
['1940-01-01', 132164, 38084],
58
['1945-01-01', 144773, 38422],
59
['1950-01-01', 151325, 38668],
60
['1955-01-01', 160460, 40698],
61
['1960-01-01', 179323, 41159],
62
['1965-01-01', 188232, 42289],
63
['1970-01-01', 203211, 43460],
64
['1975-01-01', 215789, 43899],
65
['1980-01-01', 226545, 45978],
66
['1985-01-01', 239905, 47223],
67
['1990-01-01', 248709, 48197],
68
['1995-01-01', 272119, 49066],
69
['2000-01-01', 281421, 49138],
70
['2005-01-01', 299456, 51121],
71
['2010-01-01', 308745, 53012],
72
['2015-01-01', 318914, 54986]
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).marker(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).marker(mapping_uk);
94
series_uk.name("UK");
95
96
// hatch fill
97
series_uk.hatchFill("confetti");
98
series_uk.fill("#fff");
99
series_uk.stroke("#000");
100
101
// set title
102
chart.title('Stock Marker Demo \nPopulation growth (millions)');
103
104
// display chart
105
chart.container('container');
106
chart.draw();
107
});