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
var dataSet = anychart.data.set([
5
["A", 300, 12000, 10000],
6
["B", 3000, 15000, 12000],
7
["C", 5000, 16000, 14000],
8
["D", 6000, 15000, 13000],
9
["F", 6500, 14000, 9000],
10
["E", 300, 12000, 10000],
11
["F", 3000, 15000, 12000],
12
["G", 5000, 16000, 14000],
13
["H", 6000, 15000, 13000],
14
["J", 6500, 14000, 9000]
15
]);
16
17
// map the data
18
var seriesData_1 = dataSet.mapAs({x: 0, value: 1});
19
var seriesData_2 = dataSet.mapAs({x: 0, value: 2});
20
var seriesData_3 = dataSet.mapAs({x: 0, value: 3});
21
22
// create a chart
23
var chart = anychart.area();
24
25
// create the first series, set the data
26
var series1 = chart.area(seriesData_1);
27
28
// create the second series, set the data
29
var series2 = chart.area(seriesData_2);
30
31
// create the third series, set the data
32
var series2 = chart.column(seriesData_3);
33
34
// change the orientation of the third series to vertical
35
chart.getSeriesAt(2).isVertical(true);
36
37
// set the chart title
38
chart.title("Vertical Charts: Changing On-the-Fly (Series)");
39
40
// set the container id
41
chart.container("container");
42
43
// initiate drawing the chart
44
chart.draw();
45
});