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 data = anychart.data.set([
5
["John", 10000, 100],
6
["Jake", 12000, 120],
7
["Peter", 13000, 130],
8
["James", 10000, 100],
9
["Mary", 9000, 90]
10
]);
11
12
// map the data
13
var seriesData_1 = data.mapAs({x: 0, value: 1});
14
var seriesData_2 = data.mapAs({x: 0, value: 2});
15
16
// set the chart type
17
var chart = anychart.column();
18
19
// configure the main y-scale
20
var yScale1 = anychart.scales.linear();
21
yScale1.maximum(20000);
22
23
// configure an extra y-scale
24
var yScale2 = anychart.scales.linear();
25
yScale2.maximum(150);
26
27
// set the title of the x-axis
28
var xAxis = chart.xAxis();
29
xAxis.title("Manager");
30
31
// configure the main y-axis
32
var yAxis1 = chart.yAxis(0);
33
yAxis1.scale(yScale1);
34
yAxis1.title("Sales, $");
35
36
// configure an extra y-axis
37
var yAxis2 = chart.yAxis(1);
38
yAxis2.orientation("right")
39
yAxis2.scale(yScale2);
40
yAxis2.title("Number of Items Sold");
41
42
// create the first series, set the data and name
43
var series1 = chart.column(seriesData_1);
44
series1.name("Sales");
45
46
// create the second series, set the data and name
47
var series2 = chart.line(seriesData_2);
48
series2.name("Number of Items Sold");
49
50
// bind the first series to the main y-scale
51
series1.yScale(yScale1);
52
53
// bind the second series to the extra y-scale
54
series2.yScale(yScale2);
55
56
// set the chart title
57
chart.title("Axes and Scales");
58
59
// set the container id
60
chart.container("container");
61
62
// initiate drawing the chart
63
chart.draw();
64
});