HTMLcopy
1
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-base.min.js"></script>
2
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create a data set on our data
4
var dataSet = anychart.data.set(getData());
5
6
// map data for the first series,
7
// take x from the zero column and value from the first column
8
var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
9
10
// map data for the second series,
11
// take x from the zero column and value from the second column
12
var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
13
14
// map data for the third series,
15
// take x from the zero column and value from the third column
16
var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
17
18
// map data for the fourth series,
19
// take x from the zero column and value from the fourth column
20
var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });
21
22
// create a line chart
23
var chart = anychart.line();
24
25
// configure the chart title text settings
26
chart.title('Acceptance of same-sex relationships in the US over the last 2 decades');
27
28
// set the y axis title
29
chart.yAxis().title('% of people who accept same-sex relationships');
30
31
// create the first series with the mapped data
32
var firstSeries = chart.line(firstSeriesData);
33
firstSeries.name('18-34');
34
35
// create the second series with the mapped data
36
var secondSeries = chart.line(secondSeriesData);
37
secondSeries.name('35-49');
38
39
// create the third series with the mapped data
40
var thirdSeries = chart.line(thirdSeriesData);
41
thirdSeries.name('50-64');
42
43
// create the fourth series with the mapped data
44
var fourthSeries = chart.line(fourthSeriesData);
45
fourthSeries.name('65+');
46
47
// turn the legend on
48
chart.legend().enabled(true);
49
50
// set the container id for the line chart
51
chart.container('container');
52
53
// draw the line chart
54
chart.draw();
55
56
});
57
58
function getData() {
59
return [
60
['1990',16.9,12.2,10.2,5.2],
61
['1991',17,17.8,10,4.8],
62
['1993',26.5,23.8,16.8,6.6],
63
['1994',28.7,22,17.3,9.1],
64
['1996',35.7,24,22.6,9.2],
65
['1998',37.2,24.6,22.4,11.2],
66
['2000',36.5,26.2,23.7,9.9],
67
['2002',40,34.4,23.8,16.4],
68
['2004',33.3,28.8,32.5,14.3],
69
['2006',40.2,32.1,27.5,15.1],
70
['2008',49.3,37.2,31.4,17.1],
71
['2010',51.9,42.5,36.1,28.5],
72
['2012',53.1,43.8,36,24.6],
73
['2014',63.7,45.9,44.7,31.3],
74
['2016',66.3,52,42.3,37.2],
75
['2018',70.1,57.7,49.2,39]
76
];
77
}