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 variable for custom theme
4
var customTheme = {
5
// define settings for bar charts
6
"column":{
7
"defaultXAxisSettings": {
8
"labels": {
9
// make all x labels 3 symbols long
10
"format": function() {
11
var value = this.value;
12
value = value.substr(0, 3);
13
return value
14
},
15
"title": "Month"
16
}
17
},
18
"scales": [
19
// default x scale
20
{"type": "ordinal"},
21
{
22
"type": "linear",
23
"minimum": 0,
24
"maximum": 120,
25
"ticks": {
26
"interval": 20
27
}
28
},
29
{
30
"type": "linear",
31
"minimum": 0,
32
"maximum": 900000,
33
"ticks:": {
34
"interval": 150000
35
}
36
}
37
],
38
"yScale": 2,
39
"yAxes": [
40
// settings for default y axis
41
{
42
"scale": 2,
43
"orientation": "left",
44
"labels": {
45
"format": function() {
46
return "$"+this.value
47
}
48
}
49
},
50
// settings for additional y axis
51
{
52
"orientation": "right",
53
"scale": 1,
54
"drawLastLabel": false,
55
"labels": {
56
"format": function() {
57
return this.value + "%"
58
}
59
}
60
}
61
],
62
// series settings
63
"defaultSeriesSettings": {
64
"column":{
65
"normal":{"labels": {
66
"enabled": true,
67
"fontColor": "#fff",
68
"position": "center",
69
"anchor": "center",
70
"rotation": -90,
71
"fontWeight": 900
72
}},
73
"tooltip": {
74
"format": function () {
75
return "Month: " + this.x + "\nIncome: " + this.value
76
}
77
}
78
}
79
}
80
}
81
};
82
83
// data
84
var firstHalf = anychart.data.set([
85
["January", 537166, 639657],
86
["February", 421630, 385923],
87
["March", 648662, 284603],
88
["April", 390000, 573921],
89
["May", 584213, 192848],
90
["June", 491842, 492747]
91
]);
92
93
var secondHalf = anychart.data.set([
94
["July", 617166, 237561],
95
["August", 721630, 495714],
96
["September", 248662, 375691],
97
["October", 731284, 538164],
98
["November", 542648, 695718],
99
["December", 299742, 617394]
100
]);
101
102
// apply custom theme
103
anychart.theme(customTheme);
104
105
var table = anychart.standalones.table();
106
table.contents([
107
["Year 2005", null],
108
[
109
anychart.column(firstHalf.mapAs({x: 0, value: 1})),
110
anychart.column(secondHalf.mapAs({x: 0, value: 1}))
111
],
112
["Year 2006", null],
113
[
114
anychart.column(firstHalf.mapAs({x: 0, value: 2})),
115
anychart.column(secondHalf.mapAs({x: 0, value: 2}))
116
]
117
]);
118
119
table.getRow(0).height(30);
120
table.getCell(0,0).colSpan(2);
121
122
table.getRow(2).height(30);
123
table.getCell(2,0).colSpan(2);
124
125
table.vAlign("middle");
126
table.hAlign("center");
127
table.cellBorder(null);
128
table.rowEvenFill("#efefef");
129
table.container("container");
130
table.draw();
131
});