projects / dygraphs.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
Merge pull request #462 from danvk/fast-fill
[dygraphs.git] / auto_tests / tests / axis_labels.js
... / ...
CommitLineData
1/**
2 * @fileoverview Test cases for how axis labels are chosen and formatted.
3 *
4 * @author dan@dygraphs.com (Dan Vanderkam)
5 */
6var AxisLabelsTestCase = TestCase("axis-labels");
7
8AxisLabelsTestCase.prototype.setUp = function() {
9 document.body.innerHTML = "<div id='graph'></div>";
10};
11
12AxisLabelsTestCase.prototype.tearDown = function() {
13};
14
15AxisLabelsTestCase.simpleData =
16 "X,Y,Y2\n" +
17 "0,-1,.5\n" +
18 "1,0,.7\n" +
19 "2,1,.4\n" +
20 "3,0,.98\n";
21
22AxisLabelsTestCase.prototype.kCloseFloat = 1.0e-10;
23
24AxisLabelsTestCase.prototype.testMinusOneToOne = function() {
25 var opts = {
26 width: 480,
27 height: 320
28 };
29 var data = "X,Y\n" +
30 "0,-1\n" +
31 "1,0\n" +
32 "2,1\n" +
33 "3,0\n"
34 ;
35
36 var graph = document.getElementById("graph");
37 var g = new Dygraph(graph, data, opts);
38
39 // TODO(danvk): would ['-1.0','-0.5','0.0','0.5','1.0'] be better?
40 assertEquals(['-1','-0.5','0','0.5','1'], Util.getYLabels());
41
42 // Go up to 2
43 data += "4,2\n";
44 g.updateOptions({file: data});
45 assertEquals(['-1','-0.5','0','0.5','1','1.5','2'], Util.getYLabels());
46
47 // Now 10
48 data += "5,10\n";
49 g.updateOptions({file: data});
50 assertEquals(['-2','0','2','4','6','8','10'], Util.getYLabels());
51
52 // Now 100
53 data += "6,100\n";
54 g.updateOptions({file: data});
55 assertEquals(['0','20','40','60','80','100'], Util.getYLabels());
56
57 g.setSelection(0);
58 assertEquals('0: Y: -1', Util.getLegend());
59};
60
61AxisLabelsTestCase.prototype.testSmallRangeNearZero = function() {
62 var opts = {
63 drawAxesAtZero: true,
64 width: 480,
65 height: 320
66 };
67 var data = "X,Y\n" +
68 "0,-1\n" +
69 "1,0\n" +
70 "2,1\n" +
71 "3,0\n"
72 ;
73 opts.valueRange = [-0.1, 0.1];
74
75 var graph = document.getElementById("graph");
76 var g = new Dygraph(graph, data, opts);
77 assertEqualsDelta([-0.1, -0.08, -0.06, -0.04, -0.02, 0, 0.02, 0.04, 0.06, 0.08],
78 Util.makeNumbers(Util.getYLabels()), this.kCloseFloat);
79
80 opts.valueRange = [-0.05, 0.05];
81 g.updateOptions(opts);
82 assertEquals([-0.05, -0.04, -0.03, -0.02, -0.01, 0, 0.01, 0.02, 0.03, 0.04],
83 Util.makeNumbers(Util.getYLabels()));
84
85 opts.valueRange = [-0.01, 0.01];
86 g.updateOptions(opts);
87 assertEquals([-0.01, -8.00e-3, -6.00e-3, -4.00e-3, -2.00e-3, 0, 2.00e-3, 4.00e-3, 6.00e-3, 8.00e-3],
88 Util.makeNumbers(Util.getYLabels()));
89
90 g.setSelection(1);
91 assertEquals('1: Y: 0', Util.getLegend());
92};
93
94AxisLabelsTestCase.prototype.testSmallRangeAwayFromZero = function() {
95 var opts = {
96 width: 480,
97 height: 320
98 };
99 var data = "X,Y\n" +
100 "0,-1\n" +
101 "1,0\n" +
102 "2,1\n" +
103 "3,0\n"
104 ;
105 var graph = document.getElementById("graph");
106
107 opts.valueRange = [9.9, 10.1];
108 var g = new Dygraph(graph, data, opts);
109 assertEquals(["9.9","9.92","9.94","9.96","9.98","10","10.02","10.04","10.06","10.08"], Util.getYLabels());
110
111 opts.valueRange = [9.99, 10.01];
112 g.updateOptions(opts);
113 // TODO(danvk): this is bad
114 assertEquals(["9.99","9.99","9.99","10","10","10","10","10","10.01","10.01"], Util.getYLabels());
115
116 opts.valueRange = [9.999, 10.001];
117 g.updateOptions(opts);
118 // TODO(danvk): this is even worse!
119 assertEquals(["10","10","10","10","10","10","10","10","10","10"], Util.getYLabels());
120
121 g.setSelection(1);
122 assertEquals('1: Y: 0', Util.getLegend());
123};
124
125AxisLabelsTestCase.prototype.testXAxisTimeLabelFormatter = function() {
126 var opts = {
127 width: 480,
128 height: 320
129 };
130 var data = [[5.0,0],[5.1,1],[5.2,2],[5.3,3],[5.4,4],[5.5,5],[5.6,6],[5.7,7],[5.8,8],[5.9,9]];
131 var graph = document.getElementById("graph");
132 var g = new Dygraph(graph, data, opts);
133 g.updateOptions({
134 axes : {
135 x : {
136 axisLabelFormatter : function (totalMinutes) {
137 var hours = Math.floor( totalMinutes / 60);
138 var minutes = Math.floor((totalMinutes - (hours * 60)));
139 var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
140
141 if (hours < 10) hours = "0" + hours;
142 if (minutes < 10) minutes = "0" + minutes;
143 if (seconds < 10) seconds = "0" + seconds;
144
145 return hours + ':' + minutes + ':' + seconds;
146 }
147 }
148 }
149 });
150
151 assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], Util.getXLabels());
152
153 // The legend does not use the axisLabelFormatter:
154 g.setSelection(1);
155 assertEquals('5.1: Y1: 1', Util.getLegend());
156};
157
158AxisLabelsTestCase.prototype.testAxisLabelFormatter = function () {
159 var opts = {
160 width: 480,
161 height: 320,
162 axes : {
163 x : {
164 axisLabelFormatter : function(x, granularity, opts, dg) {
165 assertEquals('number', typeof(x));
166 assertEquals('number', typeof(granularity));
167 assertEquals('function', typeof(opts));
168 assertEquals('[Dygraph graph]', dg.toString());
169 return 'x' + x;
170 }
171 },
172 y : {
173 axisLabelFormatter : function(y, granularity, opts, dg) {
174 assertEquals('number', typeof(y));
175 assertEquals('number', typeof(granularity));
176 assertEquals('function', typeof(opts));
177 assertEquals('[Dygraph graph]', dg.toString());
178 return 'y' + y;
179 }
180 }
181 },
182 labels: ['x', 'y']
183 };
184 var data = [];
185 for (var i = 0; i < 10; i++) {
186 data.push([i, 2 * i]);
187 }
188 var graph = document.getElementById("graph");
189 var g = new Dygraph(graph, data, opts);
190
191 assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
192 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
193
194 g.setSelection(2);
195 assertEquals("2: y: 4", Util.getLegend());
196};
197
198AxisLabelsTestCase.prototype.testDateAxisLabelFormatter = function () {
199 var opts = {
200 width: 480,
201 height: 320,
202 axes : {
203 x : {
204 axisLabelFormatter : function(x, granularity, opts, dg) {
205 assertTrue(Dygraph.isDateLike(x));
206 assertEquals('number', typeof(granularity));
207 assertEquals('function', typeof(opts));
208 assertEquals('[Dygraph graph]', dg.toString());
209 return 'x' + Util.formatDate(x);
210 }
211 },
212 y : {
213 axisLabelFormatter : function(y, granularity, opts, dg) {
214 assertEquals('number', typeof(y));
215 assertEquals('number', typeof(granularity));
216 assertEquals('function', typeof(opts));
217 assertEquals('[Dygraph graph]', dg.toString());
218 return 'y' + y;
219 }
220 }
221 },
222 labels: ['x', 'y']
223 };
224 var data = [];
225 for (var i = 1; i < 10; i++) {
226 data.push([new Date("2011/01/0" + i), 2 * i]);
227 }
228 var graph = document.getElementById("graph");
229 var g = new Dygraph(graph, data, opts);
230
231 assertEquals(["x2011/01/01", "x2011/01/02", "x2011/01/03", "x2011/01/04", "x2011/01/05", "x2011/01/06", "x2011/01/07", "x2011/01/08"], Util.getXLabels());
232 assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
233
234 g.setSelection(0);
235 assertEquals("2011/01/01: y: 2", Util.getLegend());
236};
237
238// This test verifies that when a valueFormatter is set (but not an
239// axisLabelFormatter), then the valueFormatter is used to format the axis
240// labels.
241AxisLabelsTestCase.prototype.testValueFormatter = function () {
242 var opts = {
243 width: 480,
244 height: 320,
245 axes : {
246 x : {
247 valueFormatter: function(x, opts, series_name, dg) {
248 assertEquals('number', typeof(x));
249 assertEquals('function', typeof(opts));
250 assertEquals('string', typeof(series_name));
251 assertEquals('[Dygraph graph]', dg.toString());
252 return 'x' + x;
253 }
254 },
255 y : {
256 valueFormatter: function(y, opts, series_name, dg) {
257 assertEquals('number', typeof(y));
258 assertEquals('function', typeof(opts));
259 assertEquals('string', typeof(series_name));
260 assertEquals('[Dygraph graph]', dg.toString());
261 return 'y' + y;
262 }
263 }
264 },
265 labels: ['x', 'y']
266 };
267 var data = [];
268 for (var i = 0; i < 10; i++) {
269 data.push([i, 2 * i]);
270 }
271 var graph = document.getElementById("graph");
272 var g = new Dygraph(graph, data, opts);
273
274 // the valueFormatter options do not affect the ticks.
275 assertEquals(['0','2','4','6','8'], Util.getXLabels());
276 assertEquals(['0','2','4','6','8','10','12','14','16','18'],
277 Util.getYLabels());
278
279 // they do affect the legend, however.
280 g.setSelection(2);
281 assertEquals("x2: y: y4", Util.getLegend());
282};
283
284AxisLabelsTestCase.prototype.testDateValueFormatter = function () {
285 var opts = {
286 width: 480,
287 height: 320,
288 axes : {
289 x : {
290 valueFormatter: function(x, opts, series_name, dg) {
291 assertEquals('number', typeof(x));
292 assertEquals('function', typeof(opts));
293 assertEquals('string', typeof(series_name));
294 assertEquals('[Dygraph graph]', dg.toString());
295 return 'x' + Util.formatDate(x);
296 }
297 },
298 y : {
299 valueFormatter: function(y, opts, series_name, dg) {
300 assertEquals('number', typeof(y));
301 assertEquals('function', typeof(opts));
302 assertEquals('string', typeof(series_name));
303 assertEquals('[Dygraph graph]', dg.toString());
304 return 'y' + y;
305 }
306 }
307 },
308 labels: ['x', 'y']
309 };
310
311 var data = [];
312 for (var i = 1; i < 10; i++) {
313 data.push([new Date("2011/01/0" + i), 2 * i]);
314 }
315 var graph = document.getElementById("graph");
316 var g = new Dygraph(graph, data, opts);
317
318 // valueFormatters do not affect ticks.
319 assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan'], Util.getXLabels());
320 assertEquals(['2','4','6','8','10','12','14','16','18'], Util.getYLabels());
321
322 // the valueFormatter options also affect the legend.
323 g.setSelection(2);
324 assertEquals('x2011/01/03: y: y6', Util.getLegend());
325};
326
327// This test verifies that when both a valueFormatter and an axisLabelFormatter
328// are specified, the axisLabelFormatter takes precedence.
329AxisLabelsTestCase.prototype.testAxisLabelFormatterPrecedence = function () {
330 var opts = {
331 width: 480,
332 height: 320,
333 axes : {
334 x : {
335 valueFormatter: function(x) {
336 return 'xvf' + x;
337 },
338 axisLabelFormatter: function(x, granularity) {
339 return 'x' + x;
340 }
341 },
342 y : {
343 valueFormatter: function(y) {
344 return 'yvf' + y;
345 },
346 axisLabelFormatter: function(y) {
347 return 'y' + y;
348 }
349 }
350 },
351 labels: ['x', 'y']
352 };
353 var data = [];
354 for (var i = 0; i < 10; i++) {
355 data.push([i, 2 * i]);
356 }
357 var graph = document.getElementById("graph");
358 var g = new Dygraph(graph, data, opts);
359
360 assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
361 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
362
363 g.setSelection(9);
364 assertEquals("xvf9: y: yvf18", Util.getLegend());
365};
366
367// This is the same as the previous test, except that options are added
368// one-by-one.
369AxisLabelsTestCase.prototype.testAxisLabelFormatterIncremental = function () {
370 var opts = {
371 width: 480,
372 height: 320,
373 labels: ['x', 'y']
374 };
375 var data = [];
376 for (var i = 0; i < 10; i++) {
377 data.push([i, 2 * i]);
378 }
379 var graph = document.getElementById("graph");
380 var g = new Dygraph(graph, data, opts);
381 g.updateOptions({
382 axes : {
383 x : {
384 valueFormatter: function(x) {
385 return 'xvf' + x;
386 }
387 }
388 }
389 });
390 g.updateOptions({
391 axes : {
392 y : {
393 valueFormatter: function(y) {
394 return 'yvf' + y;
395 }
396 }
397 }
398 });
399 g.updateOptions({
400 axes : {
401 x : {
402 axisLabelFormatter: function(x, granularity) {
403 return 'x' + x;
404 }
405 }
406 }
407 });
408 g.updateOptions({
409 axes : {
410 y : {
411 axisLabelFormatter: function(y) {
412 return 'y' + y;
413 }
414 }
415 }
416 });
417
418 assertEquals(["x0","x2","x4","x6","x8"], Util.getXLabels());
419 assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
420
421 g.setSelection(9);
422 assertEquals("xvf9: y: yvf18", Util.getLegend());
423};
424
425AxisLabelsTestCase.prototype.testGlobalFormatters = function() {
426 var opts = {
427 width: 480,
428 height: 320,
429 labels: ['x', 'y'],
430 valueFormatter: function(x) {
431 return 'vf' + x;
432 },
433 axisLabelFormatter: function(x) {
434 return 'alf' + x;
435 }
436 };
437 var data = [];
438 for (var i = 0; i < 10; i++) {
439 data.push([i, 2 * i]);
440 }
441 var graph = document.getElementById("graph");
442 var g = new Dygraph(graph, data, opts);
443
444 assertEquals(['alf0','alf2','alf4','alf6','alf8'], Util.getXLabels());
445 assertEquals(['alf0','alf2','alf4','alf6','alf8','alf10','alf12','alf14','alf16','alf18'], Util.getYLabels());
446
447 g.setSelection(9);
448 assertEquals("vf9: y: vf18", Util.getLegend());
449};
450
451AxisLabelsTestCase.prototype.testSeriesOrder = function() {
452 var opts = {
453 width: 480,
454 height: 320
455 };
456 var data = "x,00,01,10,11\n" +
457 "0,101,201,301,401\n" +
458 "1,102,202,302,402\n" +
459 "2,103,203,303,403\n" +
460 "3,104,204,304,404\n"
461 ;
462
463 var graph = document.getElementById("graph");
464 var g = new Dygraph(graph, data, opts);
465
466 g.setSelection(2);
467 assertEquals('2: 00: 103 01: 203 10: 303 11: 403', Util.getLegend());
468
469 // Sanity checks for indexFromSetName
470 assertEquals(0, g.indexFromSetName("x"));
471 assertEquals(1, g.indexFromSetName("00"));
472 assertEquals(null, g.indexFromSetName("abcde"));
473
474 // Verify that we get the label list back in the right order
475 assertEquals(["x", "00", "01", "10", "11"], g.getLabels());
476};
477
478AxisLabelsTestCase.prototype.testLabelKMB = function() {
479 var data = [];
480 data.push([0,0]);
481 data.push([1,2000]);
482 data.push([2,1000]);
483
484 var g = new Dygraph(
485 document.getElementById("graph"),
486 data,
487 {
488 labels: [ 'X', 'bar' ],
489 axes : {
490 y: {
491 labelsKMB: true
492 }
493 }
494 }
495 );
496
497 assertEquals(["0", "500", "1K", "1.5K", "2K"], Util.getYLabels());
498};
499
500AxisLabelsTestCase.prototype.testLabelKMG2 = function() {
501 var data = [];
502 data.push([0,0]);
503 data.push([1,2000]);
504 data.push([2,1000]);
505
506 var g = new Dygraph(
507 document.getElementById("graph"),
508 data,
509 {
510 labels: [ 'X', 'bar' ],
511 axes : {
512 y: {
513 labelsKMG2: true
514 }
515 }
516 }
517 );
518
519 assertEquals(
520 ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
521 Util.getYLabels());
522};
523
524// Same as testLabelKMG2 but specifies the option at the
525// top of the option dictionary.
526AxisLabelsTestCase.prototype.testLabelKMG2_top = function() {
527 var data = [];
528 data.push([0,0]);
529 data.push([1,2000]);
530 data.push([2,1000]);
531
532 var g = new Dygraph(
533 document.getElementById("graph"),
534 data,
535 {
536 labels: [ 'X', 'bar' ],
537 labelsKMG2: true
538 }
539 );
540
541 assertEquals(
542 ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
543 Util.getYLabels());
544};
545
546/**
547 * Verify that log scale axis range is properly specified.
548 */
549AxisLabelsTestCase.prototype.testLogScale = function() {
550 var g = new Dygraph("graph", [[0, 5], [1, 1000]], { logscale : true });
551 var nonEmptyLabels = Util.getYLabels().filter(function(x) { return x.length > 0; });
552 assertEquals(["6","10","30","60","100","300","600","1000"], nonEmptyLabels);
553
554 g.updateOptions({ logscale : false });
555 assertEquals(['0','200','400','600','800','1000'], Util.getYLabels());
556}
557
558/**
559 * Verify that include zero range is properly specified.
560 */
561AxisLabelsTestCase.prototype.testIncludeZero = function() {
562 var g = new Dygraph("graph", [[0, 500], [1, 1000]], { includeZero : true });
563 assertEquals(['0','200','400','600','800','1000'], Util.getYLabels());
564
565 g.updateOptions({ includeZero : false });
566 assertEquals(['500','600','700','800','900','1000'], Util.getYLabels());
567}
568
569AxisLabelsTestCase.prototype.testAxisLabelFontSize = function() {
570 var graph = document.getElementById("graph");
571 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData, {});
572
573 // Be sure we're dealing with a 14-point default.
574 assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
575
576 var assertFontSize = function(selector, expected) {
577 Util.assertStyleOfChildren(selector, "font-size", expected);
578 }
579
580 assertFontSize($(".dygraph-axis-label-x"), "14px");
581 assertFontSize($(".dygraph-axis-label-y") , "14px");
582
583 g.updateOptions({ axisLabelFontSize : 8});
584 assertFontSize($(".dygraph-axis-label-x"), "8px");
585 assertFontSize($(".dygraph-axis-label-y"), "8px");
586
587 g.updateOptions({
588 axisLabelFontSize : null,
589 axes : {
590 x : { axisLabelFontSize : 5 },
591 }
592 });
593
594 assertFontSize($(".dygraph-axis-label-x"), "5px");
595 assertFontSize($(".dygraph-axis-label-y"), "14px");
596
597 g.updateOptions({
598 axes : {
599 y : { axisLabelFontSize : 20 },
600 }
601 });
602
603 assertFontSize($(".dygraph-axis-label-x"), "5px");
604 assertFontSize($(".dygraph-axis-label-y"), "20px");
605
606 g.updateOptions({
607 series : {
608 Y2 : { axis : "y2" } // copy y2 series to y2 axis.
609 },
610 axes : {
611 y2 : { axisLabelFontSize : 12 },
612 }
613 });
614
615 assertFontSize($(".dygraph-axis-label-x"), "5px");
616 assertFontSize($(".dygraph-axis-label-y1"), "20px");
617 assertFontSize($(".dygraph-axis-label-y2"), "12px");
618}
619
620AxisLabelsTestCase.prototype.testAxisLabelFontSizeNull = function() {
621 var graph = document.getElementById("graph");
622 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData,
623 {
624 axisLabelFontSize: null
625 });
626
627 var assertFontSize = function(selector, expected) {
628 Util.assertStyleOfChildren(selector, "font-size", expected);
629 };
630
631 // Be sure we're dealing with a 14-point default.
632 assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
633
634 assertFontSize($(".dygraph-axis-label-x"), "14px");
635 assertFontSize($(".dygraph-axis-label-y"), "14px");
636}
637
638AxisLabelsTestCase.prototype.testAxisLabelColor = function() {
639 var graph = document.getElementById("graph");
640 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData, {});
641
642 // Be sure we're dealing with a black default.
643 assertEquals("black", Dygraph.DEFAULT_ATTRS.axisLabelColor);
644
645 var assertColor = function(selector, expected) {
646 Util.assertStyleOfChildren(selector, "color", expected);
647 }
648
649 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
650 assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
651
652 g.updateOptions({ axisLabelColor : "red"});
653 assertColor($(".dygraph-axis-label-x"), "rgb(255, 0, 0)");
654 assertColor($(".dygraph-axis-label-y"), "rgb(255, 0, 0)");
655
656 g.updateOptions({
657 axisLabelColor : null,
658 axes : {
659 x : { axisLabelColor : "blue" },
660 }
661 });
662
663 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
664 assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
665
666 g.updateOptions({
667 axes : {
668 y : { axisLabelColor : "green" },
669 }
670 });
671
672 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
673 assertColor($(".dygraph-axis-label-y"), "rgb(0, 128, 0)");
674
675 g.updateOptions({
676 series : {
677 Y2 : { axis : "y2" } // copy y2 series to y2 axis.
678 },
679 axes : {
680 y2 : { axisLabelColor : "yellow" },
681 }
682 });
683
684 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
685 assertColor($(".dygraph-axis-label-y1"), "rgb(0, 128, 0)");
686 assertColor($(".dygraph-axis-label-y2"), "rgb(255, 255, 0)");
687}
688
689AxisLabelsTestCase.prototype.testAxisLabelColorNull = function() {
690 var graph = document.getElementById("graph");
691 var g = new Dygraph(graph, AxisLabelsTestCase.simpleData,
692 {
693 axisLabelColor: null
694 });
695
696 var assertColor = function(selector, expected) {
697 Util.assertStyleOfChildren(selector, "color", expected);
698 }
699
700 // Be sure we're dealing with a 14-point default.
701 assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
702
703 assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
704 assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
705}
706
707/*
708 * This test shows that the label formatter overrides labelsKMB for all values.
709 */
710AxisLabelsTestCase.prototype.testLabelFormatterOverridesLabelsKMB = function() {
711 var g = new Dygraph(
712 document.getElementById("graph"),
713 "X,a,b\n" +
714 "1,0,2000\n" +
715 "2,500,1500\n" +
716 "3,1000,1000\n" +
717 "4,2000,0\n", {
718 labelsKMB: true,
719 axisLabelFormatter: function (v) {
720 return v + ":X";
721 }
722 });
723 assertEquals(["0:X","500:X","1000:X","1500:X","2000:X"], Util.getYLabels());
724 assertEquals(["1:X","1.5:X","2:X","2.5:X","3:X","3.5:X"], Util.getXLabels());
725}
726
727/*
728 * This test shows that you can override labelsKMB on the axis level.
729 */
730AxisLabelsTestCase.prototype.testLabelsKMBPerAxis = function() {
731 var g = new Dygraph(
732 document.getElementById("graph"),
733 "x,a,b\n" +
734 "1000,0,2000\n" +
735 "2000,500,1500\n" +
736 "3000,1000,1000\n" +
737 "4000,2000,0\n", {
738 labelsKMB: false,
739 axes: {
740 y2: { labelsKMB: true },
741 x: { labelsKMB: true }
742 },
743 series: {
744 b: { axis: "y2" }
745 }
746 });
747
748 // labelsKMB doesn't apply to the x axis. This value should be different.
749 // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
750 assertEquals(["1000", "1500", "2000", "2500", "3000", "3500"], Util.getXLabels());
751 assertEquals( ["0","500","1000","1500","2000"], Util.getYLabels(1));
752 assertEquals(["0","500","1K","1.5K","2K"], Util.getYLabels(2));
753};
754
755/*
756 * This test shows that you can override labelsKMG2 on the axis level.
757 */
758AxisLabelsTestCase.prototype.testLabelsKMBG2IPerAxis = function() {
759 var g = new Dygraph(
760 document.getElementById("graph"),
761 "x,a,b\n" +
762 "1000,0,2000\n" +
763 "2000,500,1500\n" +
764 "3000,1000,1000\n" +
765 "4000,2000,0\n", {
766 labelsKMG2: false,
767 axes: {
768 y2: { labelsKMG2: true },
769 x: { labelsKMG2: true }
770 },
771 series: {
772 b: { axis: "y2" }
773 }
774 });
775
776 // It is weird that labelsKMG2 does something on the x axis but KMB does not.
777 // Plus I can't be sure they're doing the same thing as they're done in different
778 // bits of code.
779 // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
780 assertEquals(["1024","1536","2048","2560","3072","3584"], Util.getXLabels());
781 assertEquals( ["0","500","1000","1500","2000"], Util.getYLabels(1));
782 assertEquals(["0","500","1000","1.46k","1.95k"], Util.getYLabels(2));
783};
784
785/**
786 * This test shows you can override sigFigs on the axis level.
787 */
788AxisLabelsTestCase.prototype.testSigFigsPerAxis = function() {
789 var g = new Dygraph(
790 document.getElementById("graph"),
791 "x,a,b\n" +
792 "1000,0,2000\n" +
793 "2000,500,1500\n" +
794 "3000,1000,1000\n" +
795 "4000,2000,0\n", {
796 sigFigs: 2,
797 axes: {
798 y2: { sigFigs: 6 },
799 x: { sigFigs: 8 }
800 },
801 series: {
802 b: { axis: "y2" }
803 }
804
805 });
806 // sigFigs doesn't apply to the x axis. This value should be different.
807 // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
808 assertEquals(["1000","1500","2000","2500","3000","3500"], Util.getXLabels());
809 assertEquals(["0.0","5.0e+2","1.0e+3","1.5e+3","2.0e+3"], Util.getYLabels(1));
810 assertEquals(["0.00000","500.000","1000.00","1500.00","2000.00"], Util.getYLabels(2));
811}
812
813/**
814 * This test shows you can override digitsAfterDecimal on the axis level.
815 */
816AxisLabelsTestCase.prototype.testDigitsAfterDecimalPerAxis = function() {
817 var g = new Dygraph(
818 document.getElementById("graph"),
819 "x,a,b\n" +
820 "0.006,0.001,0.008\n" +
821 "0.007,0.002,0.007\n" +
822 "0.008,0.003,0.006\n" +
823 "0.009,0.004,0.005\n", {
824 digitsAfterDecimal: 1,
825 series: {
826 b: { axis: "y2" }
827 }
828
829 });
830
831 g.updateOptions({ axes: { y: { digitsAfterDecimal: 3 }}});
832 assertEquals(["0.001","0.002","0.002","0.003","0.003","0.004","0.004"], Util.getYLabels(1));
833 g.updateOptions({ axes: { y: { digitsAfterDecimal: 4 }}});
834 assertEquals(["0.001","0.0015","0.002","0.0025","0.003","0.0035","0.004"], Util.getYLabels(1));
835 g.updateOptions({ axes: { y: { digitsAfterDecimal: 5 }}});
836 assertEquals(["0.001","0.0015","0.002","0.0025","0.003","0.0035","0.004"], Util.getYLabels(1));
837 g.updateOptions({ axes: { y: { digitsAfterDecimal: null }}});
838 assertEquals(["1e-3","2e-3","2e-3","3e-3","3e-3","4e-3","4e-3"], Util.getYLabels(1));
839
840 g.updateOptions({ axes: { y2: { digitsAfterDecimal: 3 }}});
841 assertEquals(["0.005","0.006","0.006","0.007","0.007","0.008","0.008"], Util.getYLabels(2));
842 g.updateOptions({ axes: { y2: { digitsAfterDecimal: 4 }}});
843 assertEquals(["0.005","0.0055","0.006","0.0065","0.007","0.0075","0.008"], Util.getYLabels(2));
844 g.updateOptions({ axes: { y2: { digitsAfterDecimal: 5 }}});
845 assertEquals(["0.005","0.0055","0.006","0.0065","0.007","0.0075","0.008"], Util.getYLabels(2));
846 g.updateOptions({ axes: { y2: { digitsAfterDecimal: null }}});
847 assertEquals(["5e-3","6e-3","6e-3","7e-3","7e-3","7e-3","8e-3"], Util.getYLabels(2));
848
849
850 // digitsAfterDecimal is ignored for the x-axis.
851 // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
852 g.updateOptions({ axes: { x: { digitsAfterDecimal: 3 }}});
853 assertEquals(["0.006","0.006500000000000001","0.007","0.0075","0.008","0.0085"], Util.getXLabels());
854 g.updateOptions({ axes: { x: { digitsAfterDecimal: 4 }}});
855 assertEquals(["0.006","0.006500000000000001","0.007","0.0075","0.008","0.0085"], Util.getXLabels());
856 g.updateOptions({ axes: { x: { digitsAfterDecimal: 5 }}});
857 assertEquals(["0.006","0.006500000000000001","0.007","0.0075","0.008","0.0085"], Util.getXLabels());
858 g.updateOptions({ axes: { x: { digitsAfterDecimal: null }}});
859 assertEquals(["0.006","0.006500000000000001","0.007","0.0075","0.008","0.0085"], Util.getXLabels());
860}
861
862/**
863 * This test shows you can override digitsAfterDecimal on the axis level.
864 */
865AxisLabelsTestCase.prototype.testMaxNumberWidthPerAxis = function() {
866 var g = new Dygraph(
867 document.getElementById("graph"),
868 "x,a,b\n" +
869 "12401,12601,12804\n" +
870 "12402,12602,12803\n" +
871 "12403,12603,12802\n" +
872 "12404,12604,12801\n", {
873 maxNumberWidth: 1,
874 series: {
875 b: { axis: "y2" }
876 }
877 });
878
879 g.updateOptions({ axes: { y: { maxNumberWidth: 4 }}});
880 assertEquals(["1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4"] , Util.getYLabels(1));
881 g.updateOptions({ axes: { y: { maxNumberWidth: 5 }}});
882 assertEquals(["12601","12601.5","12602","12602.5","12603","12603.5","12604"] , Util.getYLabels(1));
883 g.updateOptions({ axes: { y: { maxNumberWidth: null }}});
884 assertEquals(["1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4"] , Util.getYLabels(1));
885
886 g.updateOptions({ axes: { y2: { maxNumberWidth: 4 }}});
887 assertEquals(["1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4"], Util.getYLabels(2));
888 g.updateOptions({ axes: { y2: { maxNumberWidth: 5 }}});
889 assertEquals(["12801","12801.5","12802","12802.5","12803","12803.5","12804"], Util.getYLabels(2));
890 g.updateOptions({ axes: { y2: { maxNumberWidth: null }}});
891 assertEquals(["1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4"], Util.getYLabels(2));
892
893 // maxNumberWidth is ignored for the x-axis.
894 // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
895 g.updateOptions({ axes: { x: { maxNumberWidth: 4 }}});
896 assertEquals(["12401","12401.5","12402","12402.5","12403","12403.5"], Util.getXLabels());
897 g.updateOptions({ axes: { x: { maxNumberWidth: 5 }}});
898 assertEquals(["12401","12401.5","12402","12402.5","12403","12403.5"], Util.getXLabels());
899 g.updateOptions({ axes: { x: { maxNumberWidth: null }}});
900 assertEquals(["12401","12401.5","12402","12402.5","12403","12403.5"], Util.getXLabels());
901}
902
903/*
904// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=147
905// Checks that axis labels stay sane across a DST change.
906AxisLabelsTestCase.prototype.testLabelsCrossDstChange = function() {
907 // (From tests/daylight-savings.html)
908 var g = new Dygraph(
909 document.getElementById("graph"),
910 "Date/Time,Purchases\n" +
911 "2010-11-05 00:00:00,167082\n" +
912 "2010-11-06 00:00:00,168571\n" +
913 "2010-11-07 00:00:00,177796\n" +
914 "2010-11-08 00:00:00,165587\n" +
915 "2010-11-09 00:00:00,164380\n",
916 { width: 1024 }
917 );
918
919 // Dates and "nice" hours: 6AM/PM and noon, not 5AM/11AM/...
920 var okLabels = {
921 '05Nov': true,
922 '06Nov': true,
923 '07Nov': true,
924 '08Nov': true,
925 '09Nov': true,
926 '06:00': true,
927 '12:00': true,
928 '18:00': true
929 };
930
931 var xLabels = Util.getXLabels();
932 for (var i = 0; i < xLabels.length; i++) {
933 assertTrue(okLabels[xLabels[i]]);
934 }
935
936 // This range had issues of its own on tests/daylight-savings.html.
937 g.updateOptions({
938 dateWindow: [1289109997722.8127, 1289261208937.7659]
939 });
940 xLabels = Util.getXLabels();
941 for (var i = 0; i < xLabels.length; i++) {
942 assertTrue(okLabels[xLabels[i]]);
943 }
944};
945
946
947// Tests data which crosses a "fall back" at a high enough frequency that you
948// can see both 1:00 A.M.s.
949AxisLabelsTestCase.prototype.testLabelsCrossDstChangeHighFreq = function() {
950 // Generate data which crosses the EST/EDT boundary.
951 var dst_data = [];
952 var base_ms = 1383454200000;
953 for (var x = base_ms; x < base_ms + 1000 * 60 * 80; x += 1000) {
954 dst_data.push([new Date(x), x]);
955 }
956
957 var g = new Dygraph(
958 document.getElementById("graph"),
959 dst_data,
960 { width: 1024, labels: ['Date', 'Value'] }
961 );
962
963 assertEquals([
964 '00:50', '00:55',
965 '01:00', '01:05', '01:10', '01:15', '01:20', '01:25',
966 '01:30', '01:35', '01:40', '01:45', '01:50', '01:55',
967 '01:00', '01:05' // 1 AM number two!
968 ], Util.getXLabels());
969
970 // Now zoom past the initial 1 AM. This used to cause trouble.
971 g.updateOptions({
972 dateWindow: [1383454200000 + 15*60*1000, g.xAxisExtremes()[1]]}
973 );
974 assertEquals([
975 '01:05', '01:10', '01:15', '01:20', '01:25',
976 '01:30', '01:35', '01:40', '01:45', '01:50', '01:55',
977 '01:00', '01:05' // 1 AM number two!
978 ], Util.getXLabels());
979};
980
981
982// Tests data which crosses a "spring forward" at a low frequency.
983// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=433
984AxisLabelsTestCase.prototype.testLabelsCrossSpringForward = function() {
985 var g = new Dygraph(
986 document.getElementById("graph"),
987 "Date/Time,Purchases\n" +
988 "2011-03-11 00:00:00,167082\n" +
989 "2011-03-12 00:00:00,168571\n" +
990 "2011-03-13 00:00:00,177796\n" +
991 "2011-03-14 00:00:00,165587\n" +
992 "2011-03-15 00:00:00,164380\n",
993 {
994 width: 1024,
995 dateWindow: [1299989043119.4365, 1300080693627.4866]
996 });
997
998 var okLabels = {
999 '13Mar': true,
1000 // '02:00': true, // not a real time!
1001 '04:00': true,
1002 '06:00': true,
1003 '08:00': true,
1004 '10:00': true,
1005 '12:00': true,
1006 '14:00': true,
1007 '16:00': true,
1008 '18:00': true,
1009 '20:00': true,
1010 '22:00': true,
1011 '14Mar': true
1012 };
1013
1014 var xLabels = Util.getXLabels();
1015 for (var i = 0; i < xLabels.length; i++) {
1016 assertTrue(okLabels[xLabels[i]]);
1017 }
1018};
1019
1020AxisLabelsTestCase.prototype.testLabelsCrossSpringForwardHighFreq = function() {
1021 var base_ms_spring = 1299999000000;
1022 var dst_data_spring = [];
1023 for (var x = base_ms_spring; x < base_ms_spring + 1000 * 60 * 80; x += 1000) {
1024 dst_data_spring.push([new Date(x), x]);
1025 }
1026
1027 var g = new Dygraph(
1028 document.getElementById("graph"),
1029 dst_data_spring,
1030 { width: 1024, labels: ['Date', 'Value'] }
1031 );
1032
1033 assertEquals([
1034 '01:50', '01:55',
1035 '03:00', '03:05', '03:10', '03:15', '03:20', '03:25',
1036 '03:30', '03:35', '03:40', '03:45', '03:50', '03:55',
1037 '04:00', '04:05'
1038 ], Util.getXLabels());
1039};
1040*/
danvk/dygraphs fork supporting touch events