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
3
dataSet = anychart.data.set([
4
["1800", 170, 161],
5
["1820", 171, 164],
6
["1840", 174, 168],
7
["1860", 175, 170],
8
["1880", 175, 172],
9
["1900", 180, 174],
10
["1920", 181, 174],
11
["1940", 184, 176],
12
["1960", 185, 180],
13
["1980", 186, 182],
14
["2000", 188, 182]
15
]);
16
17
// map data for the first series
18
data_maleMartians = dataSet.mapAs({x: 0, value: 1});
19
20
// map data for the second series
21
data_femaleMartians = dataSet.mapAs({x: 0, value: 2});
22
23
// create a line chart
24
var chart = anychart.line();
25
26
// create the first series with mapped data
27
maleMartians = chart.line(data_maleMartians);
28
maleMartians.name("Male Martians");
29
maleMartians.color("#398CEA");
30
31
// create the second series with mapped data
32
femaleMartians = chart.line(data_femaleMartians);
33
femaleMartians.name("Female Martians");
34
femaleMartians.color("#E93F39");
35
36
// get statistical data (the average of all the y-values on the first series)
37
maleAverage = maleMartians.getStat("seriesYAverage");
38
39
// get statistical data (the average of all the y-values on the second series)
40
femaleAverage = chart.getSeriesAt(1).getStat("seriesYAverage");
41
42
// set the title of the chart
43
chart.title("The Average Height of Martians: Males ~ " + maleAverage + ", Females ~ " + femaleAverage);
44
45
// set the title of the y-axis
46
chart.yAxis().title("Average Height (cm)");
47
48
// turn the legend on
49
chart.legend(true);
50
51
// set the container id for the chart
52
chart.container("container");
53
54
// initiate drawing the chart
55
chart.draw();
56
});