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.format.inputDateTimeFormat('yyyy-MM-dd');
2
3
anychart.onDocumentReady(function () {
4
5
var json = [
6
['2018-01-04', 1000],
7
['2018-01-05', 20000],
8
['2018-01-06', 1000],
9
['2018-01-07', 20000],
10
['2018-01-08', 1000],
11
['2018-01-09', 20000],
12
['2018-01-10', 1000],
13
['2018-01-11', 20000],
14
['2018-01-12', 1000],
15
['2018-01-13', 20000],
16
['2018-01-14', 1000],
17
['2018-01-15', 20000],
18
['2018-01-16', 1000],
19
['2018-01-17', 20000],
20
['2018-01-18', 1000],
21
['2018-01-19', 20000],
22
['2018-01-20', 1000],
23
['2018-01-21', 20000],
24
['2018-01-22', 1000],
25
['2018-01-23', 20000],
26
['2018-01-24', 1000],
27
['2018-01-25', 20000],
28
['2018-01-26', 1000],
29
['2018-01-27', 20000],
30
['2018-01-28', 1000],
31
['2018-01-29', 20000],
32
['2018-01-30', 1000],
33
['2018-01-31', 20000],
34
['2018-02-01', 1000],
35
['2018-02-02', 20000],
36
['2018-02-03', 1000],
37
['2018-02-04', 20000],
38
['2018-02-05', 1000],
39
['2018-02-06', 20000],
40
['2018-02-07', 1000],
41
['2018-02-08', 20000],
42
['2018-02-09', 1000],
43
['2018-02-10', 20000],
44
['2018-02-11', 30000]
45
];
46
47
var chart = anychart.area();
48
chart.credits().enabled(false);
49
50
var series = chart.area(json);
51
52
chart.xAxis().labels().format(function () {
53
return anychart.format.dateTime(this.value, anychart.format.outputDateFormat());
54
});
55
56
chart.yGrid().enabled(true);
57
chart.yGrid().stroke({dash: "3 5", color: 'lightgray'});
58
chart.xGrid().enabled(true);
59
chart.xGrid().stroke({dash: "3 5", color: 'lightgray'});
60
61
62
// draw
63
chart.container("container");
64
chart.draw();
65
});