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
['2004-01-02', 29955800],
7
['2004-01-05', 38892100],
8
['2004-01-06', 43684400],
9
['2004-01-07', 48757500],
10
['2004-01-08', 61683300],
11
['2004-01-09', 68856400],
12
['2004-01-12', 52871900],
13
['2004-01-13', 56334200],
14
['2004-01-14', 42293600],
15
['2004-01-15', 46099400],
16
['2004-01-16', 91298000],
17
['2004-01-20', 62278500],
18
['2004-01-21', 54015600],
19
['2004-01-22', 43462000],
20
['2004-01-23', 59640900],
21
['2004-01-26', 42986700],
22
['2004-01-27', 49345900],
23
['2004-01-28', 49445200],
24
['2004-01-29', 86860704],
25
['2004-01-30', 71799504],
26
['2004-02-02', 81642800],
27
['2004-02-03', 81729600],
28
['2004-02-04', 90548992],
29
['2004-02-05', 103966000],
30
['2004-02-06', 74134704],
31
['2004-02-09', 52703900],
32
['2004-02-10', 39742500],
33
['2004-02-11', 87763696],
34
['2004-02-12', 48597500],
35
['2004-02-13', 43363800],
36
['2004-02-17', 37359700],
37
['2004-02-18', 39630200],
38
['2004-02-19', 55113900],
39
['2004-02-20', 70349296],
40
['2004-02-23', 60081300],
41
['2004-02-24', 91782200],
42
['2004-02-25', 61432900],
43
['2004-02-26', 49729800],
44
['2004-02-27', 51031700],
45
['2004-03-01', 86765900],
46
['2004-03-02', 62706500],
47
['2004-03-03', 55386900],
48
['2004-03-04', 45492400],
49
['2004-03-05', 56365600],
50
['2004-03-08', 62038700],
51
['2004-03-09', 64071900],
52
['2004-03-10', 80618496],
53
['2004-03-11', 89673504],
54
['2004-03-12', 73013296],
55
['2004-03-15', 68079904],
56
['2004-03-16', 9320900],
57
['2004-03-17', 52578100],
58
['2004-03-18', 55961200],
59
['2004-03-19', 70226704],
60
['2004-03-22', 56288400],
61
['2004-03-23', 58934600],
62
['2004-03-24', 51709700],
63
['2004-03-25', 64449300],
64
['2004-03-26', 48203800],
65
['2004-03-29', 44442700],
66
['2004-03-30', 38857600],
67
['2004-03-31', 51583000],
68
['2004-04-01', 44882300],
69
['2004-04-02', 54740900],
70
['2004-04-05', 41326200],
71
['2004-04-06', 38725000],
72
['2004-04-07', 45047500],
73
['2004-04-08', 32130200],
74
['2004-04-12', 24691100],
75
['2004-04-13', 42040700],
76
['2004-04-14', 43324300],
77
['2004-04-15', 74004200],
78
['2004-04-16', 61589200],
79
['2004-04-19', 43000200],
80
['2004-04-20', 62509800],
81
['2004-04-21', 73643696],
82
['2004-04-22', 72532200],
83
['2004-04-23', 51364700],
84
['2004-04-26', 40777500],
85
['2004-04-27', 42022900],
86
['2004-04-28', 43185300],
87
['2004-04-29', 58257700],
88
['2004-04-30', 88594800],
89
['2004-05-03', 68266800],
90
['2004-05-04', 55848200],
91
['2004-05-05', 35647000],
92
['2004-05-06', 62631800],
93
['2004-05-07', 64754800],
94
['2004-05-10', 67550096],
95
['2004-05-11', 92963904],
96
['2004-05-12', 114992800],
97
['2004-05-13', 52726300],
98
['2004-05-14', 64216800],
99
['2004-05-17', 67886000],
100
['2004-05-18', 51852700],
101
['2004-05-19', 63533600],
102
['2004-05-20', 44040200],
103
['2004-05-21', 37122600],
104
['2004-05-24', 42606900],
105
['2004-05-25', 56792400],
106
['2004-05-26', 43833800],
107
['2004-05-27', 39144700],
108
['2004-05-28', 36220400],
109
['2004-06-01', 36548100],
110
['2004-06-02', 38025400],
111
['2004-06-03', 38827800],
112
['2004-06-04', 71924000],
113
['2004-06-07', 67100900],
114
['2004-06-08', 49497200],
115
['2004-06-09', 41189900],
116
['2004-06-10', 35949900],
117
['2004-06-14', 44958400],
118
['2004-06-15', 60862600],
119
['2004-06-16', 44052400],
120
['2004-06-17', 55167200],
121
['2004-06-18', 74781904],
122
['2004-06-21', 48264000],
123
['2004-06-22', 53290400],
124
['2004-06-23', 71903000],
125
['2004-06-24', 53542000],
126
['2004-06-25', 60594100],
127
['2004-06-28', 42743600],
128
['2004-06-29', 44366600],
129
['2004-06-30', 50526900]
130
]);
131
132
// map the data
133
mapping = table.mapAs();
134
mapping.addField('value', 1);
135
136
// chart type
137
var chart = anychart.stock();
138
139
// set the series
140
var series = chart.plot(0).stepArea(mapping);
141
series.name("Total Request Number");
142
143
// y-axis labels formatting
144
chart.plot(0).yAxis().labels().format(function() {
145
return this.value/1000000 + "m";
146
});
147
148
chart.title('Stock Step Area Demo');
149
chart.container('container');
150
151
chart.draw();
152
});