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