projects / dygraphs.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
FEATURE: Added tests for stepPlot option per series
[dygraphs.git] / auto_tests / tests / stepPlot_per_series.js
CommitLineData
4fa81db5 1/**
2 * @fileoverview Test cases for the option "stepPlot" especially for the scenario where the option is not set for the whole graph but for single series.
3 *
4 * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)
5 */
6var stepTestCase = TestCase("stepPlot_per_series");
7
8stepTestCase.prototype.setUp = function() {
9 document.body.innerHTML = "<div id='graph'></div>";
10};
11
12var _origFunc = Dygraph.getContext;
13stepTestCase.prototype.setUp = function() {
14 document.body.innerHTML = "<div id='graph'></div>";
15 Dygraph.getContext = function(canvas) {
16 return new Proxy(_origFunc(canvas));
17 };
18};
19
20stepTestCase.prototype.tearDown = function() {
21 Dygraph.getContext = _origFunc;
22};
23
24stepTestCase.prototype.testMixedModeStepAndLineFilled = function() {
25 var opts = {
26 width: 480,
27 height: 320,
28 drawXGrid: false,
29 drawYGrid: false,
30 drawXAxis: false,
31 drawYAxis: false,
32 errorBars: false,
33 labels: ["X", "Idle", "Used"],
34 series: {
35 Idle: {stepPlot: false},
36 Used: {stepPlot: true}
37 },
38 fillGraph: true,
39 stackedGraph: false,
40 includeZero: true
41 };
42
43 var data = [
44 [1, 70,30],
45 [2, 12,88],
46 [3, 88,12],
47 [4, 63,37],
48 [5, 35,65]
49 ];
50
51 var graph = document.getElementById("graph");
52 var g = new Dygraph(graph, data, opts);
53
54 htx = g.hidden_ctx_;
55
56 var attrs = {};
57
58
59 for (var i = 0; i < data.length - 1; i++) {
60
61 var x1 = data[i][0];
62 var x2 = data[i + 1][0];
63
64 var y1 = data[i][1];
65 var y2 = data[i + 1][1];
66
67 // First series (line)
68 var xy1 = g.toDomCoords(x1, y1);
69 var xy2 = g.toDomCoords(x2, y2);
70 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
71
72 y1 = data[i][2];
73 y2 = data[i + 1][2];
74
75 // Seconds series (step)
76 // Horizontal line
77 xy1 = g.toDomCoords(x1, y1);
78 xy2 = g.toDomCoords(x2, y1);
79 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
80 // Vertical line
81 xy1 = g.toDomCoords(x2, y1);
82 xy2 = g.toDomCoords(x2, y2);
83 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
84 }
85};
86
87stepTestCase.prototype.testMixedModeStepAndLineStackedAndFilled = function() {
88 var opts = {
89 width: 480,
90 height: 320,
91 drawXGrid: false,
92 drawYGrid: false,
93 drawXAxis: false,
94 drawYAxis: false,
95 errorBars: false,
96 labels: ["X", "Idle", "Used", "NotUsed", "Active"],
97 series: {
98 Idle: {stepPlot: false},
99 Used: {stepPlot: true},
100 NotUsed: {stepPlot: false},
101 Active: {stepPlot: true}
102 },
103 fillGraph: true,
104 stackedGraph: true,
105 includeZero: true
106 };
107
108 var data = [
109 [1, 60,30,5,5],
110 [2, 12,73,5,10],
111 [3, 38,12,30,20],
112 [4, 50,17,23,10],
113 [5, 35,25,35,5]
114 ];
115
116 var graph = document.getElementById("graph");
117 var g = new Dygraph(graph, data, opts);
118
119 htx = g.hidden_ctx_;
120
121 var attrs = {};
122
123
124 for (var i = 0; i < data.length - 1; i++) {
125
126 var x1 = data[i][0];
127 var x2 = data[i + 1][0];
128 var y1base = 0;
129 var y2base = 0;
130 var y1 = data[i][4];
131 var y2 = data[i + 1][4];
132
133
134 // Fourth series (step)
135 // Test lines
136 // Horizontal line
137 var xy1 = g.toDomCoords(x1, y1);
138 var xy2 = g.toDomCoords(x2, y1);
139 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
140 // Vertical line
141 xy1 = g.toDomCoords(x2, y1);
142 xy2 = g.toDomCoords(x2, y2);
143 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
144
145 // Test edges of areas (also drawn by dygraphs as lines)
146 xy1 = g.toDomCoords(x1, y1);
147 xy2 = g.toDomCoords(x2, y1);
148 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
149 xy1 = xy2;
150 xy2 = g.toDomCoords(x2, y2base);
151 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
152 xy1 = xy2;
153 xy2 = g.toDomCoords(x1, y1base);
154 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
155 xy1 = xy2;
156 xy2 = g.toDomCoords(x1, y1);
157 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
158
159 y1base = y1;
160 y2base = y2;
161 y1 += data[i][3];
162 y2 += data[i + 1][3];
163
164 // Third series (line)
165 // Test lines
166 xy1 = g.toDomCoords(x1, y1);
167 xy2 = g.toDomCoords(x2, y2);
168 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
169
170 // Test edges of areas (also drawn by dygraphs as lines)
171 xy1 = g.toDomCoords(x1, y1);
172 xy2 = g.toDomCoords(x2, y2);
173 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
174 xy1 = xy2;
175 xy2 = g.toDomCoords(x2, y2base);
176 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
177 xy1 = xy2;
178 xy2 = g.toDomCoords(x1, y1base);
179 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
180 xy1 = xy2;
181 xy2 = g.toDomCoords(x1, y1);
182 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
183
184 y1base = y1;
185 y2base = y2;
186 y1 += data[i][2];
187 y2 += data[i + 1][2];
188
189 // Second series (step)
190 // Test lines
191 // Horizontal line
192 xy1 = g.toDomCoords(x1, y1);
193 xy2 = g.toDomCoords(x2, y1);
194 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
195 // Vertical line
196 xy1 = g.toDomCoords(x2, y1);
197 xy2 = g.toDomCoords(x2, y2);
198 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
199
200 // Test edges of areas (also drawn by dygraphs as lines)
201 xy1 = g.toDomCoords(x1, y1);
202 xy2 = g.toDomCoords(x2, y1);
203 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
204 xy1 = xy2;
205 xy2 = g.toDomCoords(x2, y2base);
206 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
207 xy1 = xy2;
208 xy2 = g.toDomCoords(x1, y1base);
209 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
210 xy1 = xy2;
211 xy2 = g.toDomCoords(x1, y1);
212 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
213
214 y1base = y1;
215 y2base = y2;
216 y1 += data[i][1];
217 y2 += data[i + 1][1];
218
219 // First series (line)
220 // Test lines
221 xy1 = g.toDomCoords(x1, y1);
222 xy2 = g.toDomCoords(x2, y2);
223 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
224
225 // Test edges of areas (also drawn by dygraphs as lines)
226 xy1 = g.toDomCoords(x1, y1);
227 xy2 = g.toDomCoords(x2, y2);
228 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
229 xy1 = xy2;
230 xy2 = g.toDomCoords(x2, y2base);
231 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
232 xy1 = xy2;
233 xy2 = g.toDomCoords(x1, y1base);
234 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
235 xy1 = xy2;
236 xy2 = g.toDomCoords(x1, y1);
237 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
238 }
239};
240
241stepTestCase.prototype.testMixedModeStepAndLineErrorBars = function() {
242 var opts = {
243 width: 480,
244 height: 320,
245 drawXGrid: false,
246 drawYGrid: false,
247 drawXAxis: false,
248 drawYAxis: false,
249 errorBars: true,
250 sigma: 1,
251 labels: ["X", "Data1", "Data2"],
252 series: {
253 Data1: {stepPlot: true},
254 Data2: {stepPlot: false}
255 }
256 };
257 var data = [
258 [1, [75, 2], [50, 3]],
259 [2, [70, 5], [90, 4]],
260 [3, [80, 7], [112, 5]],
261 [4, [55, 3], [100, 2]],
262 [5, [69, 4], [85, 6]]
263 ];
264
265 var graph = document.getElementById("graph");
266 var g = new Dygraph(graph, data, opts);
267
268 htx = g.hidden_ctx_;
269
270 var attrs = {};
271
272 // Test first series (step)
273 for (var i = 0; i < data.length - 1; i++) {
274 var x1 = data[i][0];
275 var x2 = data[i + 1][0];
276
277 var y1_middle = data[i][1][0];
278 var y2_middle = data[i + 1][1][0];
279
280 var y1_top = y1_middle + data[i][1][1];
281 var y2_top = y2_middle + data[i + 1][1][1];
282
283 var y1_bottom = y1_middle - data[i][1][1];
284 var y2_bottom = y2_middle - data[i + 1][1][1];
285 // Bottom line
286 // Horizontal line
287 var xy1 = g.toDomCoords(x1, y1_bottom);
288 var xy2 = g.toDomCoords(x2, y1_bottom);
289 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
290 // Vertical line
291 xy1 = g.toDomCoords(x2, y1_bottom);
292 xy2 = g.toDomCoords(x2, y2_bottom);
293 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
294
295 // Top line
296 // Horizontal line
297 xy1 = g.toDomCoords(x1, y1_top);
298 xy2 = g.toDomCoords(x2, y1_top);
299 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
300 // Vertical line
301 xy1 = g.toDomCoords(x2, y1_top);
302 xy2 = g.toDomCoords(x2, y2_top);
303 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
304
305 // Middle line
306 // Horizontal line
307 xy1 = g.toDomCoords(x1, y1_middle);
308 xy2 = g.toDomCoords(x2, y1_middle);
309 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
310 // Vertical line
311 xy1 = g.toDomCoords(x2, y1_middle);
312 xy2 = g.toDomCoords(x2, y2_middle);
313 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
314 }
315
316 // Test second series (line)
317 for (var i = 0; i < data.length - 1; i++) {
318 // bottom line
319 var xy1 = g.toDomCoords(data[i][0], (data[i][2][0] - data[i][2][1]));
320 var xy2 = g.toDomCoords(data[i + 1][0], (data[i + 1][2][0] - data[i + 1][2][1]));
321 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
322
323 // top line
324 xy1 = g.toDomCoords(data[i][0], data[i][2][0] + data[i][2][1]);
325 xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0] + data[i + 1][2][1]);
326 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
327
328 // middle line
329 xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
330 xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
331 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
332 }
333
334};
335
336stepTestCase.prototype.testMixedModeStepAndLineCustomBars = function() {
337 var opts = {
338 width: 480,
339 height: 320,
340 drawXGrid: false,
341 drawYGrid: false,
342 drawXAxis: false,
343 drawYAxis: false,
344 customBars: true,
345 labels: ["X", "Data1", "Data2"],
346 series: {
347 Data1: {stepPlot: true},
348 Data2: {stepPlot: false}
349 }
350 };
351 var data = [
352 [1, [73, 75, 78], [50, 55, 70]],
353 [2, [65, 70, 75], [83, 91, 99]],
354 [3, [75, 85, 90], [98, 107, 117]],
355 [4, [55, 58, 61], [93, 102, 105]],
356 [5, [69, 73, 85], [80, 85, 87]]
357 ];
358
359 var graph = document.getElementById("graph");
360 var g = new Dygraph(graph, data, opts);
361
362 htx = g.hidden_ctx_;
363
364 var attrs = {};
365
366 // Test first series (step)
367 for (var i = 0; i < data.length - 1; i++) {
368
369 var x1 = data[i][0];
370 var x2 = data[i + 1][0];
371
372 var y1_middle = data[i][1][1];
373 var y2_middle = data[i + 1][1][1];
374
375 var y1_top = data[i][1][2];
376 var y2_top = data[i + 1][1][2];
377
378 var y1_bottom = data[i][1][0];
379 var y2_bottom = data[i + 1][1][0];
380
381 // Bottom line
382 // Horizontal line
383 var xy1 = g.toDomCoords(x1, y1_bottom);
384 var xy2 = g.toDomCoords(x2, y1_bottom);
385 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
386 // Vertical line
387 xy1 = g.toDomCoords(x2, y1_middle);
388 xy2 = g.toDomCoords(x2, y2_middle);
389 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
390
391 // Top line
392 // Horizontal line
393 xy1 = g.toDomCoords(x1, y1_top);
394 xy2 = g.toDomCoords(x2, y1_top);
395 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
396 // Vertical line
397 xy1 = g.toDomCoords(x2, y1_middle);
398 xy2 = g.toDomCoords(x2, y2_middle);
399 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
400
401 // Middle line
402 // Horizontal line
403 xy1 = g.toDomCoords(x1, y1_middle);
404 xy2 = g.toDomCoords(x2, y1_middle);
405 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
406 // Vertical line
407 xy1 = g.toDomCoords(x2, y1_middle);
408 xy2 = g.toDomCoords(x2, y2_middle);
409 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
410 }
411
412 // Test second series (line)
413 for (var i = 0; i < data.length - 1; i++) {
414 // Bottom line
415 var xy1 = g.toDomCoords(data[i][0], data[i][2][0]);
416 var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][0]);
417 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
418
419 // Top line
420 xy1 = g.toDomCoords(data[i][0], data[i][2][2]);
421 xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][2]);
422 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
423
424 // Middle line
425 xy1 = g.toDomCoords(data[i][0], data[i][2][1]);
426 xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][2][1]);
427 CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
428 }
429};
danvk/dygraphs fork supporting touch events