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.', 51, 125, 12],
5
['Feb.', 91, 132, 9],
6
['Mar.', 34, 141, 13],
7
['Apr.', 47, 158, 21],
8
['May', 63, 133, 19],
9
['June', 58, 143, 23],
10
['July', 56, 176, 4],
11
['Aug.', 77, 194, 34],
12
['Sep.', 99, 115, 24],
13
['Oct.', 106, 134, 10],
14
['Nov.', 88, 110, 6],
15
['Dec.', 56, 91, 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.line();
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.stepLine(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.stepLine(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.stepLine(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
});