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
var chart = anychart.line();
4
5
chart.title("Extra Axes Units Comparison Sample");
6
7
// setting xScale settings
8
chart.xScale(anychart.scales.linear());
9
10
var xScale = chart.xScale();
11
xScale.minimum(1940);
12
xScale.maximum(2010);
13
xScale.ticks().interval(5);
14
15
// setting yScale settings
16
var yScale = chart.yScale();
17
yScale.minimum(0);
18
yScale.maximum(12000000000000);
19
yScale.ticks().interval(2000000000000);
20
21
// adding and adjusting extra Y scale
22
var extraYScale = anychart.scales.linear();
23
extraYScale.minimum(0);
24
extraYScale.maximum(140);
25
extraYScale.ticks().interval(20);
26
27
// adding and adjusting extra Y axis
28
var extraYAxis = chart.yAxis(1);
29
extraYAxis.orientation("right");
30
extraYAxis.scale(extraYScale);
31
32
// setting yAxes titles
33
chart.yAxis(0).title("Debt");
34
extraYAxis.title("GDP");
35
36
// yAxes labels text adjusting
37
chart.yAxis(0).labels().format("${%value}{scale:(1000000000000)|(T)}");
38
chart.yAxis(1).labels().format("{%value}%");
39
40
// disable x axis title
41
var xAxis = chart.xAxis();
42
xAxis.title(false);
43
44
// enabling x axis stagger mode
45
xAxis.staggerMode(true);
46
47
// settings for labels of x axis
48
xAxis.labels().width(50);
49
xAxis.labels().hAlign("center");
50
51
// adjusting data visualisation
52
var lineSeries = chart.line(getData1());
53
lineSeries.stroke("#00F");
54
lineSeries.hovered().stroke("#00F");
55
lineSeries.yScale(extraYScale);
56
57
var columnSeries = chart.column(getData2());
58
columnSeries.fill(["#FF0000", "#880000"], -90);
59
columnSeries.stroke("#000", 1);
60
columnSeries.hovered().stroke("#FFF", 1);
61
columnSeries.hovered().fill(["#FF0000", "#880000"], -90);
62
63
var tooltip = chart.tooltip();
64
tooltip.titleFormat(function() {
65
return "Year: " + this.points[0].x;
66
});
67
tooltip.unionFormat(function() {
68
var gdp = "GDP - " + this.points[0].value + "%";
69
var debt = (this.points[1].value / 1000000000).toFixed(0);
70
if (debt > 999)
71
debt = ("" + debt/1000).replace(".", " ");
72
return gdp + "\nDebt - $" + debt + " bil." ;
73
});
74
75
chart.container("container");
76
chart.draw();
77
});
78
79
function getData1(){
80
return [
81
[1940, 52.4],
82
[1941, 50.5],
83
[1942, 54.9],
84
[1943, 79.2],
85
[1944, 97.6],
86
[1945, 117.5],
87
[1946, 121.7],
88
[1947, 109.6],
89
[1948, 98.3],
90
[1949, 93],
91
[1950, 93.9],
92
[1951, 79.5],
93
[1952, 74.3],
94
[1953, 71.2],
95
[1954, 71.6],
96
[1955, 69.4],
97
[1956, 63.8],
98
[1957, 60.4],
99
[1958, 60.7],
100
[1959, 58.4],
101
[1960, 56],
102
[1961, 55],
103
[1962, 53.3],
104
[1963, 51.7],
105
[1964, 49.3],
106
[1965, 46.9],
107
[1966, 43.6],
108
[1967, 41.8],
109
[1968, 42.5],
110
[1969, 38.5],
111
[1970, 37.6],
112
[1971, 37.7],
113
[1972, 36.9],
114
[1973, 35.6],
115
[1974, 33.6],
116
[1975, 34.7],
117
[1976, 36.2],
118
[1977, 35.8],
119
[1978, 35],
120
[1979, 33.1],
121
[1980, 33.3],
122
[1981, 32.5],
123
[1982, 35.2],
124
[1983, 39.9],
125
[1984, 40.8],
126
[1985, 43.9],
127
[1986, 48.2],
128
[1987, 50.5],
129
[1988, 51.9],
130
[1989, 53.1],
131
[1990, 55.9],
132
[1991, 60.7],
133
[1992, 64.4],
134
[1993, 66.3],
135
[1994, 66.9],
136
[1995, 67.2],
137
[1996, 67.3],
138
[1997, 65.6],
139
[1998, 63.5],
140
[1999, 61.4],
141
[2000, 58],
142
[2001, 57.4],
143
[2002, 59.7],
144
[2003, 62.4],
145
[2004, 63.7],
146
[2005, 65.7],
147
[2006, 67.5],
148
[2007, 68.7],
149
[2008, 69.3],
150
[2009, 69.8],
151
[2010, 70]
152
]
153
}
154
155
function getData2(){
156
return [
157
[1940, 45500000000],
158
[1941, 56500000000],
159
[1942, 100000000000],
160
[1943, 170000000000],
161
[1944, 216500000000],
162
[1945, 263535000000],
163
[1946, 262600000000],
164
[1947, 257900000000],
165
[1948, 252563000000],
166
[1949, 257037000000],
167
[1950, 257357352351],
168
[1951, 255221976815],
169
[1952, 259105178785],
170
[1953, 275168120129],
171
[1954, 278749814391],
172
[1955, 280768553189],
173
[1956, 276627527996],
174
[1957, 274897784291],
175
[1958, 282922423583],
176
[1959, 290797771718],
177
[1960, 310000000000],
178
[1961, 296168761214],
179
[1962, 303470080489],
180
[1963, 309346845059],
181
[1964, 317940472718],
182
[1965, 320904110042],
183
[1966, 329319249366],
184
[1967, 344663009745],
185
[1968, 358028625002],
186
[1969, 368225581254],
187
[1970, 389158403690],
188
[1971, 424130961959],
189
[1972, 449298066119],
190
[1973, 469898039554],
191
[1974, 492665000000],
192
[1975, 576649000000],
193
[1976, 653544000000],
194
[1977, 718943000000],
195
[1978, 789207000000],
196
[1979, 845116000000],
197
[1980, 930210000000],
198
[1981, 1028729000000],
199
[1982, 1197073000000],
200
[1983, 1410702000000],
201
[1984, 1662966000000],
202
[1985, 1945941616459],
203
[1986, 2125302616658],
204
[1987, 2350276890953],
205
[1988, 2602337712041],
206
[1989, 2857430960187],
207
[1990, 3233313451777],
208
[1991, 3665303351697],
209
[1992, 4064620655521],
210
[1993, 4411488883139],
211
[1994, 4692749910013],
212
[1995, 4973982900709],
213
[1996, 5224810939135],
214
[1997, 5413146011397],
215
[1998, 5526193008897],
216
[1999, 5605523901615],
217
[2000, 5674178209887],
218
[2001, 5807463412200],
219
[2002, 6228235965597],
220
[2003, 6783231062743],
221
[2004, 7379052696330],
222
[2005, 7932709661723],
223
[2006, 8506973899215],
224
{ x: 2007, value: 9350102000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"},
225
{ x: 2008, value: 9948640000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"},
226
{ x: 2009, value: 10543521000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"},
227
{ x: 2010, value: 11137297000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"}
228
];
229
}