auto_tests/tests/multiple_axes.js

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