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':"2004-01-02", 'value': 299},
7
{'x':"2004-01-05", 'value': 388},
8
{'x':"2004-01-06", 'value': 436},
9
{'x':"2004-01-07", 'value': 487},
10
{'x':"2004-01-08", 'value': 616},
11
{'x':"2004-01-09", 'value': 688},
12
{'x':"2004-01-12", 'value': 528},
13
{'x':"2004-01-13", 'value': 563},
14
{'x':"2004-01-14", 'value': 422},
15
{'x':"2004-01-15", 'value': 460},
16
{'x':"2004-01-16", 'value': 912},
17
{'x':"2004-01-20", 'value': 622},
18
{'x':"2004-01-21", 'value': 540},
19
{'x':"2004-01-22", 'value': 434},
20
{'x':"2004-01-23", 'value': 596},
21
{'x':"2004-01-26", 'value': 429},
22
{'x':"2004-01-27", 'value': 493},
23
{'x':"2004-01-28", 'value': 494},
24
{'x':"2004-01-29", 'value': 868},
25
{'x':"2004-01-30", 'value': 717},
26
{'x':"2004-02-02", 'value': 816},
27
{'x':"2004-02-03", 'value': 817},
28
{'x':"2004-02-04", 'value': 905},
29
{'x':"2004-02-05", 'value': 103},
30
{'x':"2004-02-06", 'value': 741},
31
{'x':"2004-02-09", 'value': 527},
32
{'x':"2004-02-10", 'value': 397},
33
{'x':"2004-02-11", 'value': 877},
34
{'x':"2004-02-12", 'value': 485},
35
{'x':"2004-02-13", 'value': 433},
36
{'x':"2004-02-17", 'value': 373}
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).stepArea(mapping);
47
series.name("Total Request number");
48
49
chart.title('Stock Step Area Demo');
50
chart.container('container');
51
52
chart.draw();
53
});