auto_tests/tests/axis_labels.js

   1 /**
   2  * @fileoverview Test cases for how axis labels are chosen and formatted.
   3  *
   4  * @author dan@dygraphs.com (Dan Vanderkam)
   5  */
   6 describe("axis-labels", function() {
   7
   8 beforeEach(function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 });
  11
  12 afterEach(function() {
  13 });
  14
  15 var 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
  22 var kCloseFloat = 1.0e-10;
  23
  24 it('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   assert.deepEqual(['-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   assert.deepEqual(['-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   assert.deepEqual(['-2','0','2','4','6','8','10'], Util.getYLabels());
  51
  52   // Now 100
  53   data += "6,100\n";
  54   g.updateOptions({file: data});
  55   assert.deepEqual(['0','20','40','60','80','100'], Util.getYLabels());
  56
  57   g.setSelection(0);
  58   assert.equal('0: Y: -1', Util.getLegend());
  59 });
  60
  61 it('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   assertDeepCloseTo([-0.1,-0.05,0,0.05],
  78                     Util.makeNumbers(Util.getYLabels()), kCloseFloat);
  79
  80   opts.valueRange = [-0.05, 0.05];
  81   g.updateOptions(opts);
  82   assert.deepEqual([-0.04,-0.02,0,0.02,0.04],
  83                    Util.makeNumbers(Util.getYLabels()));
  84
  85   opts.valueRange = [-0.01, 0.01];
  86   g.updateOptions(opts);
  87   assert.deepEqual([-0.01,-0.005,0,0.005],
  88                    Util.makeNumbers(Util.getYLabels()));
  89
  90   g.setSelection(1);
  91   assert.equal('1: Y: 0', Util.getLegend());
  92 });
  93
  94 it('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   assert.deepEqual(["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   assert.deepEqual(["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   assert.deepEqual(["10","10","10","10"], Util.getYLabels());
 120
 121   g.setSelection(1);
 122   assert.equal('1: Y: 0', Util.getLegend());
 123 });
 124
 125 it('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   assert.deepEqual(["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   assert.equal('5.1: Y1: 1', Util.getLegend());
 156 });
 157
 158 it('testAxisLabelFormatter', function() {
 159   var opts = {
 160     width: 480,
 161     height: 320,
 162     axes : {
 163       x : {
 164         axisLabelFormatter : function(x, granularity, opts, dg) {
 165           assert.equal('number', typeof(x));
 166           assert.equal('number', typeof(granularity));
 167           assert.equal('function', typeof(opts));
 168           assert.equal('[Dygraph graph]', dg.toString());
 169           return 'x' + x;
 170         }
 171       },
 172       y : {
 173         axisLabelFormatter : function(y, granularity, opts, dg) {
 174           assert.equal('number', typeof(y));
 175           assert.equal('number', typeof(granularity));
 176           assert.equal('function', typeof(opts));
 177           assert.equal('[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   assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels());
 192   assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels());
 193
 194   g.setSelection(2);
 195   assert.equal("2: y: 4", Util.getLegend());
 196 });
 197
 198 it('testDateAxisLabelFormatter', function() {
 199   var opts = {
 200     width: 480,
 201     height: 320,
 202     axes : {
 203       x : {
 204         pixelsPerLabel: 60,
 205         axisLabelFormatter : function(x, granularity, opts, dg) {
 206           assert.isTrue(Dygraph.isDateLike(x));
 207           assert.equal('number', typeof(granularity));
 208           assert.equal('function', typeof(opts));
 209           assert.equal('[Dygraph graph]', dg.toString());
 210           return 'x' + Util.formatDate(x);
 211         }
 212       },
 213       y : {
 214         axisLabelFormatter : function(y, granularity, opts, dg) {
 215           assert.equal('number', typeof(y));
 216           assert.equal('number', typeof(granularity));
 217           assert.equal('function', typeof(opts));
 218           assert.equal('[Dygraph graph]', dg.toString());
 219           return 'y' + y;
 220         }
 221       }
 222     },
 223     labels: ['x', 'y']
 224   };
 225   var data = [];
 226   for (var i = 1; i < 10; i++) {
 227     data.push([new Date("2011/01/0" + i), 2 * i]);
 228   }
 229   var graph = document.getElementById("graph");
 230   var g = new Dygraph(graph, data, opts);
 231
 232   assert.deepEqual(["x2011/01/02","x2011/01/04","x2011/01/06","x2011/01/08"], Util.getXLabels());
 233   assert.deepEqual(["y5","y10","y15"], Util.getYLabels());
 234
 235   g.setSelection(0);
 236   assert.equal("2011/01/01: y: 2", Util.getLegend());
 237 });
 238
 239 // This test verifies that when a valueFormatter is set (but not an
 240 // axisLabelFormatter), then the valueFormatter is used to format the axis
 241 // labels.
 242 it('testValueFormatter', function() {
 243   var opts = {
 244     width: 480,
 245     height: 320,
 246     axes: {
 247       x: {
 248         valueFormatter: function(x, opts, series_name, dg, row, col) {
 249           assert.equal('number', typeof(x));
 250           assert.equal('function', typeof(opts));
 251           assert.equal('string', typeof(series_name));
 252           assert.equal('[Dygraph graph]', dg.toString());
 253           assert.equal('number', typeof(row));
 254           assert.equal('number', typeof(col));
 255           assert.equal(dg, this);
 256           return 'x' + x;
 257         }
 258       },
 259       y: {
 260         valueFormatter: function(y, opts, series_name, dg, row, col) {
 261           assert.equal('number', typeof(y));
 262           assert.equal('function', typeof(opts));
 263           assert.equal('string', typeof(series_name));
 264           assert.equal('[Dygraph graph]', dg.toString());
 265           assert.equal('number', typeof(row));
 266           assert.equal('number', typeof(col));
 267           assert.equal(dg, this);
 268           return 'y' + y;
 269         }
 270       }
 271     },
 272     labels: ['x', 'y']
 273   };
 274   var data = [];
 275   for (var i = 0; i < 10; i++) {
 276     data.push([i, 2 * i]);
 277   }
 278   var graph = document.getElementById("graph");
 279   var g = new Dygraph(graph, data, opts);
 280
 281   // the valueFormatter options do not affect the ticks.
 282   assert.deepEqual(['0','2','4','6','8'], Util.getXLabels());
 283   assert.deepEqual(["0","5","10","15"],
 284                Util.getYLabels());
 285
 286   // they do affect the legend, however.
 287   g.setSelection(2);
 288   assert.equal("x2: y: y4", Util.getLegend());
 289 });
 290
 291 it('testDateValueFormatter', function() {
 292   var opts = {
 293     width: 480,
 294     height: 320,
 295     axes : {
 296       x : {
 297         pixelsPerLabel: 60,
 298         valueFormatter: function(x, opts, series_name, dg, row, col) {
 299           assert.equal('number', typeof(x));
 300           assert.equal('function', typeof(opts));
 301           assert.equal('string', typeof(series_name));
 302           assert.equal('[Dygraph graph]', dg.toString());
 303           assert.equal('number', typeof(row));
 304           assert.equal('number', typeof(col));
 305           assert.equal(dg, this);
 306           return 'x' + Util.formatDate(x);
 307         }
 308       },
 309       y : {
 310         valueFormatter: function(y, opts, series_name, dg, row, col) {
 311           assert.equal('number', typeof(y));
 312           assert.equal('function', typeof(opts));
 313           assert.equal('string', typeof(series_name));
 314           assert.equal('[Dygraph graph]', dg.toString());
 315           assert.equal('number', typeof(row));
 316           assert.equal('number', typeof(col));
 317           assert.equal(dg, this);
 318           return 'y' + y;
 319         }
 320       }
 321     },
 322     labels: ['x', 'y']
 323   };
 324
 325   var data = [];
 326   for (var i = 1; i < 10; i++) {
 327     data.push([new Date("2011/01/0" + i), 2 * i]);
 328   }
 329   var graph = document.getElementById("graph");
 330   var g = new Dygraph(graph, data, opts);
 331
 332   // valueFormatters do not affect ticks.
 333   assert.deepEqual(["02 Jan","04 Jan","06 Jan","08 Jan"], Util.getXLabels());
 334   assert.deepEqual(["5","10","15"], Util.getYLabels());
 335
 336   // the valueFormatter options also affect the legend.
 337   g.setSelection(2);
 338   assert.equal('x2011/01/03: y: y6', Util.getLegend());
 339 });
 340
 341 // This test verifies that when both a valueFormatter and an axisLabelFormatter
 342 // are specified, the axisLabelFormatter takes precedence.
 343 it('testAxisLabelFormatterPrecedence', function() {
 344   var opts = {
 345     width: 480,
 346     height: 320,
 347     axes : {
 348       x : {
 349         valueFormatter: function(x) {
 350           assert.equal('[Dygraph graph]', this.toString());
 351           return 'xvf' + x;
 352         },
 353         axisLabelFormatter: function(x, granularity) {
 354           assert.equal('[Dygraph graph]', this.toString());
 355           return 'x' + x;
 356         }
 357       },
 358       y : {
 359         valueFormatter: function(y) {
 360           assert.equal('[Dygraph graph]', this.toString());
 361           return 'yvf' + y;
 362         },
 363         axisLabelFormatter: function(y) {
 364           assert.equal('[Dygraph graph]', this.toString());
 365           return 'y' + y;
 366         }
 367       }
 368     },
 369     labels: ['x', 'y']
 370   };
 371   var data = [];
 372   for (var i = 0; i < 10; i++) {
 373     data.push([i, 2 * i]);
 374   }
 375   var graph = document.getElementById("graph");
 376   var g = new Dygraph(graph, data, opts);
 377
 378   assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels());
 379   assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels());
 380
 381   g.setSelection(9);
 382   assert.equal("xvf9: y: yvf18", Util.getLegend());
 383 });
 384
 385 // This is the same as the previous test, except that options are added
 386 // one-by-one.
 387 it('testAxisLabelFormatterIncremental', function() {
 388   var opts = {
 389     width: 480,
 390     height: 320,
 391     labels: ['x', 'y']
 392   };
 393   var data = [];
 394   for (var i = 0; i < 10; i++) {
 395     data.push([i, 2 * i]);
 396   }
 397   var graph = document.getElementById("graph");
 398   var g = new Dygraph(graph, data, opts);
 399   g.updateOptions({
 400     axes : {
 401       x : {
 402         valueFormatter: function(x) {
 403           return 'xvf' + x;
 404         }
 405       }
 406     }
 407   });
 408   g.updateOptions({
 409     axes : {
 410       y : {
 411         valueFormatter: function(y) {
 412           return 'yvf' + y;
 413         }
 414       }
 415     }
 416   });
 417   g.updateOptions({
 418     axes : {
 419       x : {
 420         axisLabelFormatter: function(x, granularity) {
 421           return 'x' + x;
 422         }
 423       }
 424     }
 425   });
 426   g.updateOptions({
 427     axes : {
 428       y : {
 429         axisLabelFormatter: function(y) {
 430           return 'y' + y;
 431         }
 432       }
 433     }
 434   });
 435
 436   assert.deepEqual(["x0","x2","x4","x6","x8"], Util.getXLabels());
 437   assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels());
 438
 439   g.setSelection(9);
 440   assert.equal("xvf9: y: yvf18", Util.getLegend());
 441 });
 442
 443 it('testGlobalFormatters', function() {
 444   var opts = {
 445     width: 480,
 446     height: 320,
 447     labels: ['x', 'y'],
 448     valueFormatter: function(x) {
 449       assert.equal('[Dygraph graph]', this);
 450       return 'vf' + x;
 451     },
 452     axisLabelFormatter: function(x) {
 453       assert.equal('[Dygraph graph]', this);
 454       return 'alf' + x;
 455     }
 456   };
 457   var data = [];
 458   for (var i = 0; i < 10; i++) {
 459     data.push([i, 2 * i]);
 460   }
 461   var graph = document.getElementById("graph");
 462   var g = new Dygraph(graph, data, opts);
 463
 464   assert.deepEqual(['alf0','alf2','alf4','alf6','alf8'], Util.getXLabels());
 465   assert.deepEqual(["alf0","alf5","alf10","alf15"], Util.getYLabels());
 466
 467   g.setSelection(9);
 468   assert.equal("vf9: y: vf18", Util.getLegend());
 469 });
 470
 471 it('testValueFormatterParameters', function() {
 472   var calls = [];
 473   // change any functions in list to 'fn' -- functions can't be asserted.
 474   var killFunctions = function(list) {
 475     var out = [];
 476     for (var i = 0; i < list.length; i++) {
 477       if (typeof(list[i]) == 'function') {
 478         out[i] = 'fn';
 479       } else {
 480         out[i] = list[i];
 481       }
 482     }
 483     return out;
 484   };
 485   var taggedRecorder = function(tag) {
 486     return function() {
 487       calls.push([tag].concat([this], killFunctions(arguments)));
 488       return '';
 489     }
 490   };
 491   var opts = {
 492     axes: {
 493       x:  { valueFormatter: taggedRecorder('x') },
 494       y:  { valueFormatter: taggedRecorder('y') },
 495       y2: { valueFormatter: taggedRecorder('y2') }
 496     },
 497     series: {
 498       'y1': { axis: 'y1'},
 499       'y2': { axis: 'y2'}
 500     },
 501     labels: ['x', 'y1', 'y2']
 502   };
 503   var data = [
 504     [0, 1, 2],
 505     [1, 3, 4]
 506   ];
 507   var graph = document.getElementById('graph');
 508   var g = new Dygraph(graph, data, opts);
 509
 510   assert.deepEqual([], calls);
 511   g.setSelection(0);
 512   assert.deepEqual([
 513     // num or millis, opts, series, dygraph, row, col
 514     [ 'x', g, 0, 'fn',  'x', g, 0, 0],
 515     [ 'y', g, 1, 'fn', 'y1', g, 0, 1],
 516     ['y2', g, 2, 'fn', 'y2', g, 0, 2]
 517   ], calls);
 518
 519   calls = [];
 520   g.setSelection(1);
 521   assert.deepEqual([
 522     [ 'x', g, 1, 'fn',  'x', g, 1, 0],
 523     [ 'y', g, 3, 'fn', 'y1', g, 1, 1],
 524     ['y2', g, 4, 'fn', 'y2', g, 1, 2]
 525   ], calls);
 526 });
 527
 528 it('testSeriesOrder', function() {
 529   var opts = {
 530     width: 480,
 531     height: 320
 532   };
 533   var data = "x,00,01,10,11\n" +
 534       "0,101,201,301,401\n" +
 535       "1,102,202,302,402\n" +
 536       "2,103,203,303,403\n" +
 537       "3,104,204,304,404\n"
 538   ;
 539
 540   var graph = document.getElementById("graph");
 541   var g = new Dygraph(graph, data, opts);
 542
 543   g.setSelection(2);
 544   assert.equal('2: 00: 103 01: 203 10: 303 11: 403', Util.getLegend());
 545
 546   // Sanity checks for indexFromSetName
 547   assert.equal(0, g.indexFromSetName("x"));
 548   assert.equal(1, g.indexFromSetName("00"));
 549   assert.equal(null, g.indexFromSetName("abcde"));
 550
 551   // Verify that we get the label list back in the right order
 552   assert.deepEqual(["x", "00", "01", "10", "11"], g.getLabels());
 553 });
 554
 555 it('testLabelKMB', function() {
 556   var data = [];
 557   data.push([0,0]);
 558   data.push([1,2000]);
 559   data.push([2,1000]);
 560
 561   var g = new Dygraph(
 562     document.getElementById("graph"),
 563     data,
 564     {
 565       labels: [ 'X', 'bar' ],
 566       axes : {
 567         y: {
 568           labelsKMB: true
 569         }
 570       }
 571     }
 572   );
 573
 574   assert.deepEqual(["0", "500", "1K", "1.5K", "2K"], Util.getYLabels());
 575 });
 576
 577 it('testLabelKMG2', function() {
 578   var data = [];
 579   data.push([0,0]);
 580   data.push([1,2000]);
 581   data.push([2,1000]);
 582
 583   var g = new Dygraph(
 584     document.getElementById("graph"),
 585     data,
 586     {
 587       labels: [ 'X', 'bar' ],
 588       axes : {
 589         y: {
 590           labelsKMG2: true
 591         }
 592       }
 593     }
 594   );
 595
 596   assert.deepEqual(["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
 597                    Util.getYLabels());
 598 });
 599
 600 // Same as testLabelKMG2 but specifies the option at the
 601 // top of the option dictionary.
 602 it('testLabelKMG2_top', function() {
 603   var data = [];
 604   data.push([0,0]);
 605   data.push([1,2000]);
 606   data.push([2,1000]);
 607
 608   var g = new Dygraph(
 609     document.getElementById("graph"),
 610     data,
 611     {
 612       labels: [ 'X', 'bar' ],
 613       labelsKMG2: true
 614     }
 615   );
 616
 617   assert.deepEqual(
 618       ["0","256","512","768","1k","1.25k","1.5k","1.75k","2k"],
 619       Util.getYLabels());
 620 });
 621
 622 it('testSmallLabelKMB', function() {
 623   var data = [];
 624   data.push([0, 0]);
 625   data.push([1, 1e-6]);
 626   data.push([2, 2e-6]);
 627
 628   var g = new Dygraph(
 629     document.getElementById("graph"),
 630     data,
 631     {
 632       labels: [ 'X', 'bar' ],
 633       axes : {
 634         y: {
 635           labelsKMB: true
 636         }
 637       }
 638     }
 639   );
 640
 641   // TODO(danvk): use prefixes here (e.g. m, µ, n)
 642   assert.deepEqual(['0', '5.00e-7', '1.00e-6', '1.50e-6', '2.00e-6'],
 643                    Util.getYLabels());
 644 });
 645
 646 it('testSmallLabelKMG2', function() {
 647   var data = [];
 648   data.push([0, 0]);
 649   data.push([1, 1e-6]);
 650   data.push([2, 2e-6]);
 651
 652   var g = new Dygraph(
 653     document.getElementById("graph"),
 654     data,
 655     {
 656       labels: [ 'X', 'bar' ],
 657       axes : {
 658         y: {
 659           labelsKMG2: true
 660         }
 661       }
 662     }
 663   );
 664
 665   // TODO(danvk): this is strange--the values aren't on powers of two, and are
 666   // these units really used for powers of two in <1? See issue #571.
 667   assert.deepEqual(['0', '0.48u', '0.95u', '1.43u', '1.91u'],
 668                    Util.getYLabels());
 669 });
 670
 671 /**
 672  * Verify that log scale axis range is properly specified.
 673  */
 674 it('testLogScale', function() {
 675   var g = new Dygraph("graph", [[0, 5], [1, 1000]], { logscale : true });
 676   var nonEmptyLabels = Util.getYLabels().filter(function(x) { return x.length > 0; });
 677   assert.deepEqual(["5","10","20","50","100","200","500","1000"], nonEmptyLabels);
 678
 679   g.updateOptions({ logscale : false });
 680   assert.deepEqual(['0','200','400','600','800','1000'], Util.getYLabels());
 681 });
 682
 683 /**
 684  * Verify that include zero range is properly specified.
 685  */
 686 it('testIncludeZero', function() {
 687   var g = new Dygraph("graph", [[0, 500], [1, 1000]], { includeZero : true });
 688   assert.deepEqual(['0','200','400','600','800','1000'], Util.getYLabels());
 689
 690   g.updateOptions({ includeZero : false });
 691   assert.deepEqual(['500','600','700','800','900','1000'], Util.getYLabels());
 692 });
 693
 694 it('testAxisLabelFontSize', function() {
 695   var graph = document.getElementById("graph");
 696   var g = new Dygraph(graph, simpleData, {});
 697
 698   // Be sure we're dealing with a 14-point default.
 699   assert.equal(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
 700
 701   var assertFontSize = function(selector, expected) {
 702     Util.assertStyleOfChildren(selector, "font-size", expected);
 703   }
 704
 705   assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "14px");
 706   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y") , "14px");
 707
 708   g.updateOptions({ axisLabelFontSize : 8});
 709   assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "8px");
 710   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "8px");
 711
 712   g.updateOptions({
 713     axisLabelFontSize : null,
 714     axes : {
 715       x : { axisLabelFontSize : 5 },
 716     }
 717   });
 718
 719   assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "5px");
 720   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "14px");
 721
 722   g.updateOptions({
 723     axes : {
 724       y : { axisLabelFontSize : 20 },
 725     }
 726   });
 727
 728   assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "5px");
 729   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "20px");
 730
 731   g.updateOptions({
 732     series : {
 733       Y2 : { axis : "y2" } // copy y2 series to y2 axis.
 734     },
 735     axes : {
 736       y2 : { axisLabelFontSize : 12 },
 737     }
 738   });
 739
 740   assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "5px");
 741   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y1"), "20px");
 742   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y2"), "12px");
 743 });
 744
 745 it('testAxisLabelFontSizeNull', function() {
 746   var graph = document.getElementById("graph");
 747   var g = new Dygraph(graph, simpleData,
 748     {
 749       axisLabelFontSize: null
 750     });
 751
 752   var assertFontSize = function(selector, expected) {
 753     Util.assertStyleOfChildren(selector, "font-size", expected);
 754   };
 755
 756   // Be sure we're dealing with a 14-point default.
 757   assert.equal(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
 758
 759   assertFontSize(document.querySelectorAll(".dygraph-axis-label-x"), "14px");
 760   assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "14px");
 761 });
 762
 763 it('testAxisLabelColor', function() {
 764   var graph = document.getElementById("graph");
 765   var g = new Dygraph(graph, simpleData, {});
 766
 767   // Be sure we're dealing with a black default.
 768   assert.equal("black", Dygraph.DEFAULT_ATTRS.axisLabelColor);
 769
 770   var assertColor = function(selector, expected) {
 771     Util.assertStyleOfChildren(selector, "color", expected);
 772   }
 773
 774   assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
 775   assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
 776
 777   g.updateOptions({ axisLabelColor : "red"});
 778   assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(255, 0, 0)");
 779   assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(255, 0, 0)");
 780
 781   g.updateOptions({
 782     axisLabelColor : null,
 783     axes : {
 784       x : { axisLabelColor : "blue" },
 785     }
 786   });
 787
 788   assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
 789   assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
 790
 791   g.updateOptions({
 792     axes : {
 793       y : { axisLabelColor : "green" },
 794     }
 795   });
 796
 797   assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
 798   assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 128, 0)");
 799
 800   g.updateOptions({
 801     series : {
 802       Y2 : { axis : "y2" } // copy y2 series to y2 axis.
 803     },
 804     axes : {
 805       y2 : { axisLabelColor : "yellow" },
 806     }
 807   });
 808
 809   assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
 810   assertColor(document.querySelectorAll(".dygraph-axis-label-y1"), "rgb(0, 128, 0)");
 811   assertColor(document.querySelectorAll(".dygraph-axis-label-y2"), "rgb(255, 255, 0)");
 812 });
 813
 814 it('testAxisLabelColorNull', function() {
 815   var graph = document.getElementById("graph");
 816   var g = new Dygraph(graph, simpleData,
 817     {
 818       axisLabelColor: null
 819     });
 820
 821   var assertColor = function(selector, expected) {
 822     Util.assertStyleOfChildren(selector, "color", expected);
 823   }
 824
 825   // Be sure we're dealing with a 14-point default.
 826   assert.equal(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
 827
 828   assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
 829   assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
 830 });
 831
 832 /*
 833  * This test shows that the label formatter overrides labelsKMB for all values.
 834  */
 835 it('testLabelFormatterOverridesLabelsKMB', function() {
 836   var g = new Dygraph(
 837       document.getElementById("graph"),
 838       "X,a,b\n" +
 839       "1,0,2000\n" +
 840       "2,500,1500\n" +
 841       "3,1000,1000\n" +
 842       "4,2000,0\n", {
 843         labelsKMB: true,
 844         axisLabelFormatter: function (v) {
 845           return v + ":X";
 846         }
 847       });
 848   assert.deepEqual(["0:X","500:X","1000:X","1500:X","2000:X"], Util.getYLabels());
 849   assert.deepEqual(["1:X","2:X","3:X"], Util.getXLabels());
 850 });
 851
 852 /*
 853  * This test shows that you can override labelsKMB on the axis level.
 854  */
 855 it('testLabelsKMBPerAxis', function() {
 856   var g = new Dygraph(
 857       document.getElementById("graph"),
 858       "x,a,b\n" +
 859       "1000,0,2000\n" +
 860       "2000,500,1500\n" +
 861       "3000,1000,1000\n" +
 862       "4000,2000,0\n", {
 863         labelsKMB: false,
 864         axes: {
 865           y2: { labelsKMB: true },
 866           x: { labelsKMB: true }
 867         },
 868         series: {
 869           b: { axis: "y2" }
 870         }
 871       });
 872
 873   // labelsKMB doesn't apply to the x axis. This value should be different.
 874   // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
 875   assert.deepEqual(["1000","2000","3000"], Util.getXLabels());
 876   assert.deepEqual(["0","500","1000","1500","2000"], Util.getYLabels(1));
 877   assert.deepEqual(["0","500","1K","1.5K","2K"], Util.getYLabels(2));
 878 });
 879
 880 /*
 881  * This test shows that you can override labelsKMG2 on the axis level.
 882  */
 883 it('testLabelsKMBG2IPerAxis', function() {
 884   var g = new Dygraph(
 885       document.getElementById("graph"),
 886       "x,a,b\n" +
 887       "1000,0,2000\n" +
 888       "2000,500,1500\n" +
 889       "3000,1000,1000\n" +
 890       "4000,2000,0\n", {
 891         labelsKMG2: false,
 892         axes: {
 893           y2: { labelsKMG2: true },
 894           x: { labelsKMG2: true, pixelsPerLabel: 60 }
 895         },
 896         series: {
 897           b: { axis: "y2" }
 898         }
 899       });
 900
 901   // It is weird that labelsKMG2 does something on the x axis but KMB does not.
 902   // Plus I can't be sure they're doing the same thing as they're done in different
 903   // bits of code.
 904   // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
 905   assert.deepEqual(["1024","2048","3072"], Util.getXLabels());
 906   assert.deepEqual(["0","500","1000","1500","2000"], Util.getYLabels(1));
 907   assert.deepEqual(["0","500","1000","1.46k","1.95k"], Util.getYLabels(2));
 908 });
 909
 910 /**
 911  * This test shows you can override sigFigs on the axis level.
 912  */
 913 it('testSigFigsPerAxis', function() {
 914   var g = new Dygraph(
 915       document.getElementById("graph"),
 916       "x,a,b\n" +
 917       "1000,0,2000\n" +
 918       "2000,500,1500\n" +
 919       "3000,1000,1000\n" +
 920       "4000,2000,0\n", {
 921         sigFigs: 2,
 922         axes: {
 923           y2: { sigFigs: 6 },
 924           x: { sigFigs: 8 }
 925         },
 926         series: {
 927           b: { axis: "y2" }
 928         }
 929
 930       });
 931   // sigFigs doesn't apply to the x axis. This value should be different.
 932   // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
 933   assert.deepEqual(["1000","2000","3000"], Util.getXLabels());
 934   assert.deepEqual(["0.0","5.0e+2","1.0e+3","1.5e+3","2.0e+3"], Util.getYLabels(1));
 935   assert.deepEqual(["0.00000","500.000","1000.00","1500.00","2000.00"], Util.getYLabels(2));
 936 });
 937
 938 /**
 939  * This test shows you can override digitsAfterDecimal on the axis level.
 940  */
 941 it('testDigitsAfterDecimalPerAxis', function() {
 942   var g = new Dygraph(
 943       document.getElementById("graph"),
 944       "x,a,b\n" +
 945       "0.006,0.001,0.008\n" +
 946       "0.007,0.002,0.007\n" +
 947       "0.008,0.003,0.006\n" +
 948       "0.009,0.004,0.005\n", {
 949         digitsAfterDecimal: 1,
 950         series: {
 951           b: { axis: "y2" }
 952         }
 953
 954       });
 955
 956   g.updateOptions({ axes: { y: { digitsAfterDecimal: 3 }}});
 957   assert.deepEqual(["0.001","0.002","0.002","0.003","0.003","0.004","0.004"], Util.getYLabels(1));
 958   g.updateOptions({ axes: { y: { digitsAfterDecimal: 4 }}});
 959   assert.deepEqual(["0.001","0.0015","0.002","0.0025","0.003","0.0035","0.004"], Util.getYLabels(1));
 960   g.updateOptions({ axes: { y: { digitsAfterDecimal: 5 }}});
 961   assert.deepEqual(["0.001","0.0015","0.002","0.0025","0.003","0.0035","0.004"], Util.getYLabels(1));
 962   g.updateOptions({ axes: { y: { digitsAfterDecimal: null }}});
 963   assert.deepEqual(["1e-3","2e-3","2e-3","3e-3","3e-3","4e-3","4e-3"], Util.getYLabels(1));
 964
 965   g.updateOptions({ axes: { y2: { digitsAfterDecimal: 3 }}});
 966   assert.deepEqual(["0.005","0.006","0.006","0.007","0.007","0.008","0.008"], Util.getYLabels(2));
 967   g.updateOptions({ axes: { y2: { digitsAfterDecimal: 4 }}});
 968   assert.deepEqual(["0.005","0.0055","0.006","0.0065","0.007","0.0075","0.008"], Util.getYLabels(2));
 969   g.updateOptions({ axes: { y2: { digitsAfterDecimal: 5 }}});
 970   assert.deepEqual(["0.005","0.0055","0.006","0.0065","0.007","0.0075","0.008"], Util.getYLabels(2));
 971   g.updateOptions({ axes: { y2: { digitsAfterDecimal: null }}});
 972   assert.deepEqual(["5e-3","6e-3","6e-3","7e-3","7e-3","7e-3","8e-3"], Util.getYLabels(2));
 973
 974
 975   // digitsAfterDecimal is ignored for the x-axis.
 976   // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
 977   g.updateOptions({ axes: { x: { digitsAfterDecimal: 3 }}});
 978   assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels());
 979   g.updateOptions({ axes: { x: { digitsAfterDecimal: 4 }}});
 980   assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels());
 981   g.updateOptions({ axes: { x: { digitsAfterDecimal: 5 }}});
 982   assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels());
 983   g.updateOptions({ axes: { x: { digitsAfterDecimal: null }}});
 984   assert.deepEqual(["0.006","0.007","0.008"], Util.getXLabels());
 985 });
 986
 987 /**
 988  * This test shows you can override digitsAfterDecimal on the axis level.
 989  */
 990 it('testMaxNumberWidthPerAxis', function() {
 991   var g = new Dygraph(
 992       document.getElementById("graph"),
 993       "x,a,b\n" +
 994       "12401,12601,12804\n" +
 995       "12402,12602,12803\n" +
 996       "12403,12603,12802\n" +
 997       "12404,12604,12801\n", {
 998         maxNumberWidth: 1,
 999         series: {
1000           b: { axis: "y2" }
1001         }
1002       });
1003
1004   g.updateOptions({ axes: { y: { maxNumberWidth: 4 }}});
1005   assert.deepEqual(["1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4"] , Util.getYLabels(1));
1006   g.updateOptions({ axes: { y: { maxNumberWidth: 5 }}});
1007   assert.deepEqual(["12601","12601.5","12602","12602.5","12603","12603.5","12604"] , Util.getYLabels(1));
1008   g.updateOptions({ axes: { y: { maxNumberWidth: null }}});
1009   assert.deepEqual(["1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4","1.26e+4"] , Util.getYLabels(1));
1010
1011   g.updateOptions({ axes: { y2: { maxNumberWidth: 4 }}});
1012   assert.deepEqual(["1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4"], Util.getYLabels(2));
1013   g.updateOptions({ axes: { y2: { maxNumberWidth: 5 }}});
1014   assert.deepEqual(["12801","12801.5","12802","12802.5","12803","12803.5","12804"], Util.getYLabels(2));
1015   g.updateOptions({ axes: { y2: { maxNumberWidth: null }}});
1016   assert.deepEqual(["1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4","1.28e+4"], Util.getYLabels(2));
1017
1018   // maxNumberWidth is ignored for the x-axis.
1019   // BUG : https://code.google.com/p/dygraphs/issues/detail?id=488
1020   g.updateOptions({ axes: { x: { maxNumberWidth: 4 }}});
1021   assert.deepEqual(["12401","12402","12403"], Util.getXLabels());
1022   g.updateOptions({ axes: { x: { maxNumberWidth: 5 }}});
1023   assert.deepEqual(["12401","12402","12403"], Util.getXLabels());
1024   g.updateOptions({ axes: { x: { maxNumberWidth: null }}});
1025   assert.deepEqual(["12401","12402","12403"], Util.getXLabels());
1026 });
1027
1028 /*
1029 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=147
1030 // Checks that axis labels stay sane across a DST change.
1031 it('testLabelsCrossDstChange', function() {
1032   // (From tests/daylight-savings.html)
1033   var g = new Dygraph(
1034       document.getElementById("graph"),
1035       "Date/Time,Purchases\n" +
1036       "2010-11-05 00:00:00,167082\n" +
1037       "2010-11-06 00:00:00,168571\n" +
1038       "2010-11-07 00:00:00,177796\n" +
1039       "2010-11-08 00:00:00,165587\n" +
1040       "2010-11-09 00:00:00,164380\n",
1041       { width: 1024 }
1042       );
1043
1044   // Dates and "nice" hours: 6AM/PM and noon, not 5AM/11AM/...
1045   var okLabels = {
1046     '05Nov': true,
1047     '06Nov': true,
1048     '07Nov': true,
1049     '08Nov': true,
1050     '09Nov': true,
1051     '06:00': true,
1052     '12:00': true,
1053     '18:00': true
1054   };
1055
1056   var xLabels = Util.getXLabels();
1057   for (var i = 0; i < xLabels.length; i++) {
1058     assert.isTrue(okLabels[xLabels[i]]);
1059   }
1060
1061   // This range had issues of its own on tests/daylight-savings.html.
1062   g.updateOptions({
1063     dateWindow: [1289109997722.8127, 1289261208937.7659]
1064   });
1065   xLabels = Util.getXLabels();
1066   for (var i = 0; i < xLabels.length; i++) {
1067     assert.isTrue(okLabels[xLabels[i]]);
1068   }
1069 });
1070
1071
1072 // Tests data which crosses a "fall back" at a high enough frequency that you
1073 // can see both 1:00 A.M.s.
1074 it('testLabelsCrossDstChangeHighFreq', function() {
1075   // Generate data which crosses the EST/EDT boundary.
1076   var dst_data = [];
1077   var base_ms = 1383454200000;
1078   for (var x = base_ms; x < base_ms + 1000 * 60 * 80; x += 1000) {
1079     dst_data.push([new Date(x), x]);
1080   }
1081
1082   var g = new Dygraph(
1083           document.getElementById("graph"),
1084           dst_data,
1085       { width: 1024, labels: ['Date', 'Value'] }
1086       );
1087
1088   assert.deepEqual([
1089     '00:50', '00:55',
1090     '01:00', '01:05', '01:10', '01:15', '01:20', '01:25',
1091     '01:30', '01:35', '01:40', '01:45', '01:50', '01:55',
1092     '01:00', '01:05'  // 1 AM number two!
1093   ], Util.getXLabels());
1094
1095   // Now zoom past the initial 1 AM. This used to cause trouble.
1096   g.updateOptions({
1097     dateWindow: [1383454200000 + 15*60*1000, g.xAxisExtremes()[1]]}
1098   );
1099   assert.deepEqual([
1100     '01:05', '01:10', '01:15', '01:20', '01:25',
1101     '01:30', '01:35', '01:40', '01:45', '01:50', '01:55',
1102     '01:00', '01:05'  // 1 AM number two!
1103   ], Util.getXLabels());
1104 });
1105
1106
1107 // Tests data which crosses a "spring forward" at a low frequency.
1108 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=433
1109 it('testLabelsCrossSpringForward', function() {
1110   var g = new Dygraph(
1111       document.getElementById("graph"),
1112       "Date/Time,Purchases\n" +
1113       "2011-03-11 00:00:00,167082\n" +
1114       "2011-03-12 00:00:00,168571\n" +
1115       "2011-03-13 00:00:00,177796\n" +
1116       "2011-03-14 00:00:00,165587\n" +
1117       "2011-03-15 00:00:00,164380\n",
1118       {
1119         width: 1024,
1120         dateWindow: [1299989043119.4365, 1300080693627.4866]
1121       });
1122
1123   var okLabels = {
1124     '13Mar': true,
1125     // '02:00': true,  // not a real time!
1126     '04:00': true,
1127     '06:00': true,
1128     '08:00': true,
1129     '10:00': true,
1130     '12:00': true,
1131     '14:00': true,
1132     '16:00': true,
1133     '18:00': true,
1134     '20:00': true,
1135     '22:00': true,
1136     '14Mar': true
1137   };
1138
1139   var xLabels = Util.getXLabels();
1140   for (var i = 0; i < xLabels.length; i++) {
1141     assert.isTrue(okLabels[xLabels[i]]);
1142   }
1143 });
1144
1145 it('testLabelsCrossSpringForwardHighFreq', function() {
1146   var base_ms_spring = 1299999000000;
1147   var dst_data_spring = [];
1148   for (var x = base_ms_spring; x < base_ms_spring + 1000 * 60 * 80; x += 1000) {
1149     dst_data_spring.push([new Date(x), x]);
1150   }
1151
1152   var g = new Dygraph(
1153       document.getElementById("graph"),
1154       dst_data_spring,
1155       { width: 1024, labels: ['Date', 'Value'] }
1156   );
1157
1158   assert.deepEqual([
1159     '01:50', '01:55',
1160     '03:00', '03:05', '03:10', '03:15', '03:20', '03:25',
1161     '03:30', '03:35', '03:40', '03:45', '03:50', '03:55',
1162     '04:00', '04:05'
1163   ], Util.getXLabels());
1164 });
1165 */
1166
1167 });