multiple_axes.js

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