Commit | Line | Data |
---|---|---|
71e72c82 RK |
1 | /** |
2 | * @fileoverview Tests involving multiple y-axes. | |
3 | * | |
4 | * @author danvdk@gmail.com (Dan Vanderkam) | |
5 | */ | |
6 | ||
7 | var MultipleAxesTestCase = TestCase("multiple-axes-tests"); | |
8 | ||
9 | MultipleAxesTestCase.prototype.setUp = function() { | |
10 | document.body.innerHTML = "<div id='graph'></div>"; | |
11 | }; | |
12 | ||
13 | function getYLabelsForAxis(axis_num) { | |
14 | var y_labels = document.getElementsByClassName("dygraph-axis-label-y" + axis_num); | |
15 | var ary = []; | |
16 | for (var i = 0; i < y_labels.length; i++) { | |
17 | ary.push(y_labels[i].innerHTML); | |
18 | } | |
19 | return ary; | |
20 | } | |
21 | ||
22 | function getLegend() { | |
23 | var legend = document.getElementsByClassName("dygraph-legend")[0]; | |
24 | return legend.textContent; | |
25 | } | |
26 | ||
27 | // returns all text in tags w/ a given css class, sorted. | |
28 | function getClassTexts(css_class) { | |
29 | var texts = []; | |
30 | var els = document.getElementsByClassName(css_class); | |
31 | for (var i = 0; i < els.length; i++) { | |
32 | texts[i] = els[i].textContent; | |
33 | } | |
34 | texts.sort(); | |
35 | return texts; | |
36 | } | |
37 | ||
38 | MultipleAxesTestCase.getData = function() { | |
39 | var data = []; | |
40 | for (var i = 1; i <= 100; i++) { | |
41 | var m = "01", d = i; | |
42 | if (d > 31) { m = "02"; d -= 31; } | |
43 | if (m == "02" && d > 28) { m = "03"; d -= 28; } | |
44 | if (m == "03" && d > 31) { m = "04"; d -= 31; } | |
45 | if (d < 10) d = "0" + d; | |
46 | // two series, one with range 1-100, one with range 1-2M | |
47 | data.push([new Date("2010/" + m + "/" + d), | |
48 | i, | |
49 | 100 - i, | |
50 | 1e6 * (1 + i * (100 - i) / (50 * 50)), | |
51 | 1e6 * (2 - i * (100 - i) / (50 * 50))]); | |
52 | } | |
53 | return data; | |
54 | }; | |
55 | ||
56 | MultipleAxesTestCase.prototype.testBasicMultipleAxes = function() { | |
57 | var data = MultipleAxesTestCase.getData(); | |
58 | ||
59 | var g = new Dygraph( | |
60 | document.getElementById("graph"), | |
61 | data, | |
62 | { | |
63 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
64 | width: 640, | |
65 | height: 350, | |
66 | series : { | |
67 | 'Y3': { | |
68 | axis: 'y2' | |
69 | }, | |
70 | 'Y4': { | |
71 | axis: 'y2' | |
72 | } | |
73 | }, | |
74 | axes : { | |
75 | y2 : { | |
76 | // set axis-related properties here | |
77 | labelsKMB: true | |
78 | } | |
79 | } | |
80 | } | |
81 | ); | |
82 | ||
83 | assertEquals(["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"], getYLabelsForAxis("1")); | |
84 | assertEquals(["900K", "1.01M", "1.12M", "1.23M", "1.34M", "1.45M", "1.55M", "1.66M", "1.77M", "1.88M", "1.99M"], getYLabelsForAxis("2")); | |
85 | }; | |
86 | ||
87 | MultipleAxesTestCase.prototype.testTwoAxisVisibility = function() { | |
88 | var data = []; | |
89 | data.push([0,0,0]); | |
90 | data.push([1,2,2000]); | |
91 | data.push([2,4,1000]); | |
92 | ||
93 | var g = new Dygraph( | |
94 | document.getElementById("graph"), | |
95 | data, | |
96 | { | |
97 | labels: [ 'X', 'bar', 'zot' ], | |
98 | series : { | |
99 | zot : { | |
100 | axis : 'y2' | |
101 | } | |
102 | }, | |
103 | axes : { | |
104 | y2: { | |
105 | labelsKMB: true | |
106 | } | |
107 | } | |
108 | } | |
109 | ); | |
110 | ||
111 | assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0); | |
112 | assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0); | |
113 | ||
114 | g.setVisibility(0, false); | |
115 | ||
116 | assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0); | |
117 | assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0); | |
118 | ||
119 | g.setVisibility(0, true); | |
120 | g.setVisibility(1, false); | |
121 | ||
122 | assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0); | |
123 | assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0); | |
124 | }; | |
125 | ||
126 | // verifies that all four chart labels (title, x-, y-, y2-axis label) can be | |
127 | // used simultaneously. | |
128 | MultipleAxesTestCase.prototype.testMultiChartLabels = function() { | |
129 | var data = MultipleAxesTestCase.getData(); | |
130 | ||
131 | var el = document.getElementById("graph"); | |
132 | el.style.border = '1px solid black'; | |
133 | el.style.marginLeft = '200px'; | |
134 | el.style.marginTop = '200px'; | |
135 | ||
136 | var g = new Dygraph( | |
137 | el, | |
138 | data, | |
139 | { | |
140 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
141 | width: 640, | |
142 | height: 350, | |
143 | series : { | |
144 | 'Y3': { | |
145 | axis: 'y2' | |
146 | }, | |
147 | 'Y4': { | |
148 | axis: 'y2' | |
149 | } | |
150 | }, | |
151 | xlabel: 'x-axis', | |
152 | ylabel: 'y-axis', | |
153 | y2label: 'y2-axis', | |
154 | title: 'Chart title' | |
155 | } | |
156 | ); | |
157 | ||
158 | assertEquals(["Chart title", "x-axis", "y-axis", "y2-axis"], | |
159 | getClassTexts("dygraph-label")); | |
160 | assertEquals(["Chart title"], getClassTexts("dygraph-title")); | |
161 | assertEquals(["x-axis"], getClassTexts("dygraph-xlabel")); | |
162 | assertEquals(["y-axis"], getClassTexts("dygraph-ylabel")); | |
163 | assertEquals(["y2-axis"], getClassTexts("dygraph-y2label")); | |
164 | ||
165 | // TODO(danvk): check relative positioning here: title on top, y left of y2. | |
166 | }; | |
167 | ||
168 | // Check that a chart w/o a secondary y-axis will not get a y2label, even if one | |
169 | // is specified. | |
170 | MultipleAxesTestCase.prototype.testNoY2LabelWithoutSecondaryAxis = function() { | |
171 | var g = new Dygraph( | |
172 | document.getElementById("graph"), | |
173 | MultipleAxesTestCase.getData(), | |
174 | { | |
175 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
176 | width: 640, | |
177 | height: 350, | |
178 | xlabel: 'x-axis', | |
179 | ylabel: 'y-axis', | |
180 | y2label: 'y2-axis', | |
181 | title: 'Chart title' | |
182 | } | |
183 | ); | |
184 | ||
185 | assertEquals(["Chart title", "x-axis", "y-axis"], | |
186 | getClassTexts("dygraph-label")); | |
187 | assertEquals(["Chart title"], getClassTexts("dygraph-title")); | |
188 | assertEquals(["x-axis"], getClassTexts("dygraph-xlabel")); | |
189 | assertEquals(["y-axis"], getClassTexts("dygraph-ylabel")); | |
190 | assertEquals([], getClassTexts("dygraph-y2label")); | |
191 | }; | |
192 | ||
193 | MultipleAxesTestCase.prototype.testValueRangePerAxisOptions = function() { | |
194 | var data = MultipleAxesTestCase.getData(); | |
195 | ||
196 | g = new Dygraph( | |
197 | document.getElementById("graph"), | |
198 | data, | |
199 | { | |
200 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
201 | series : { | |
202 | 'Y3': { | |
203 | axis: 'y2' | |
204 | }, | |
205 | 'Y4': { | |
206 | axis: 'y2' | |
207 | } | |
208 | }, | |
209 | axes: { | |
210 | y: { | |
211 | valueRange: [40, 70] | |
212 | }, | |
213 | y2: { | |
214 | // set axis-related properties here | |
215 | labelsKMB: true | |
216 | } | |
217 | }, | |
218 | ylabel: 'Primary y-axis', | |
219 | y2label: 'Secondary y-axis', | |
220 | yAxisLabelWidth: 60 | |
221 | } | |
222 | ); | |
223 | assertEquals(["40", "45", "50", "55", "60", "65"], getYLabelsForAxis("1")); | |
224 | assertEquals(["900K","1.1M","1.3M","1.5M","1.7M","1.9M"], getYLabelsForAxis("2")); | |
225 | ||
226 | g.updateOptions( | |
227 | { | |
228 | axes: { | |
229 | y: { | |
230 | valueRange: [40, 80] | |
231 | }, | |
232 | y2: { | |
233 | valueRange: [1e6, 1.2e6] | |
234 | } | |
235 | } | |
236 | } | |
237 | ); | |
238 | assertEquals(["40", "45", "50", "55", "60", "65", "70", "75"], getYLabelsForAxis("1")); | |
239 | assertEquals(["1M", "1.02M", "1.05M", "1.08M", "1.1M", "1.13M", "1.15M", "1.18M"], getYLabelsForAxis("2")); | |
240 | }; | |
241 | ||
242 | MultipleAxesTestCase.prototype.testDrawPointCallback = function() { | |
243 | var data = MultipleAxesTestCase.getData(); | |
244 | ||
245 | var results = { y : {}, y2 : {}}; | |
246 | var firstCallback = function(g, seriesName, ctx, canvasx, canvasy, color, radius) { | |
247 | results.y[seriesName] = 1; | |
248 | Dygraph.Circles.DEFAULT(g, seriesName, ctx, canvasx, canvasy, color, radius); | |
249 | ||
250 | }; | |
251 | var secondCallback = function(g, seriesName, ctx, canvasx, canvasy, color, radius) { | |
252 | results.y2[seriesName] = 1; | |
253 | Dygraph.Circles.TRIANGLE(g, seriesName, ctx, canvasx, canvasy, color, radius); | |
254 | }; | |
255 | ||
256 | g = new Dygraph( | |
257 | document.getElementById("graph"), | |
258 | data, | |
259 | { | |
260 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
261 | drawPoints : true, | |
262 | pointSize : 3, | |
263 | series : { | |
264 | 'Y3': { | |
265 | axis: 'y2' | |
266 | }, | |
267 | 'Y4': { | |
268 | axis: 'y2' | |
269 | } | |
270 | }, | |
271 | axes: { | |
272 | y2: { | |
273 | drawPointCallback: secondCallback | |
274 | } | |
275 | }, | |
276 | drawPointCallback: firstCallback | |
277 | } | |
278 | ); | |
279 | ||
280 | assertEquals(1, results.y["Y1"]); | |
281 | assertEquals(1, results.y["Y2"]); | |
282 | assertEquals(1, results.y2["Y3"]); | |
283 | assertEquals(1, results.y2["Y4"]); | |
284 | }; |