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