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
// create data set on our data
3
var dataSet = anychart.data.set([
4
['Jan.', 125, 51, 12],
5
['Feb.', 132, 91, 9],
6
['Mar.', 141, 34, 13],
7
['Apr.', 158, 47, 21],
8
['May', 133, 63, 19],
9
['June', 143, 58, 23],
10
['July', 176, 56, 4],
11
['Aug.', 194, 77, 34],
12
['Sep.', 115, 99, 24],
13
['Oct.', 134, 106, 10],
14
['Nov.', 110, 88, 6],
15
['Dec.', 91, 56, 19]
16
]);
17
18
// map data for the first series, take x from the zero column and value from the first column of data set
19
var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
20
21
// map data for the second series, take x from the zero column and value from the second column of data set
22
var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
23
24
// map data for the third series, take x from the zero column and value from the third column of data set
25
var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
26
27
// create line chart
28
var chart = anychart.area();
29
30
// turn on chart animation
31
chart.animation(true);
32
33
// turn on the crosshair
34
chart.crosshair().enabled(true).yLabel().enabled(false);
35
chart.crosshair().enabled(true).yStroke(null);
36
37
// set y axis title
38
chart.yAxis().title('Amount of comments collected');
39
40
// create first series with mapped data
41
var series_1 = chart.stepArea(seriesData_1);
42
series_1.name('Grateful').hovered().markers().enabled(true).type('circle').size(4);
43
44
// create second series with mapped data
45
var series_2 = chart.stepArea(seriesData_2);
46
series_2.name('Neutral').hovered().markers().enabled(true).type('circle').size(4);
47
48
// create third series with mapped data
49
var series_3 = chart.stepArea(seriesData_3);
50
series_3.name('Disgruntled').hovered().markers().enabled(true).type('circle').size(4);
51
52
// turn the legend on
53
chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
54
55
// set container id for the chart
56
chart.container('container');
57
58
// initiate chart drawing
59
chart.draw();
60
});