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, 12500],
6
["Jake", 12000, 15000],
7
["Peter", 13000, 16500],
8
["James", 10000, 13000],
9
["Mary", 9000, 11000]
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
// create a chart
17
var chart = anychart.column();
18
19
// create two series and set the data
20
var series1 = chart.column(seriesData_1);
21
var series2 = chart.column(seriesData_2);
22
23
// create objects with settings
24
var normal = {
25
fill: {color:"#0066cc", opacity: 0.3},
26
stroke: {color: "#0066cc"}
27
};
28
29
var hovered = {
30
fill: {color:"#0066cc", opacity: 0.1},
31
stroke: {color: "#0066cc", thickness: 2},
32
markers: {enabled: true}
33
};
34
35
var selected = {
36
fill: {color:"#0066cc", opacity: 0.5},
37
stroke: {color: "#0066cc", thickness: 4},
38
markers: {enabled: true},
39
labels: {enabled: true}
40
};
41
42
// configure the states of the first series
43
series1.normal(normal);
44
series1.hovered(hovered);
45
series1.selected(selected);
46
47
// configure the states of the second series
48
series2.normal(normal);
49
series2.hovered(hovered);
50
series2.selected(selected);
51
52
// set the chart title
53
chart.title("States: Series (Object Notation)");
54
55
// set the container id
56
chart.container("container");
57
58
// initiate drawing the chart
59
chart.draw();
60
});