auto_tests/tests/multiple_axes-old.js

   1 /**
   2  * @fileoverview Tests involving multiple y-axes.
   3  *
   4  * @author danvdk@gmail.com (Dan Vanderkam)
   5  */
   6
   7 var MultipleAxesOldTestCase = TestCase("multiple-axes-old-tests");
   8
   9 MultipleAxesOldTestCase.prototype.setUp = function() {
  10   document.body.innerHTML = "<div id='graph'></div>";
  11 };
  12
  13 MultipleAxesOldTestCase.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 MultipleAxesOldTestCase.prototype.testOldBasicMultipleAxes = function() {
  32   var data = MultipleAxesTestCase.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       'Y3': {
  42         axis: {
  43           // set axis-related properties here
  44           labelsKMB: true
  45         }
  46       },
  47       'Y4': {
  48         axis: 'Y3'  // use the same y-axis as series Y3
  49       }
  50     }
  51   );
  52
  53   assertEquals(["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"], Util.getYLabels("1"));
  54   assertEquals(["900K", "1.01M", "1.12M", "1.23M", "1.34M", "1.45M", "1.55M", "1.66M", "1.77M", "1.88M", "1.99M"], Util.getYLabels("2"));
  55 };
  56
  57 MultipleAxesOldTestCase.prototype.testOldNewStylePerAxisOptions = function() {
  58   var data = MultipleAxesTestCase.getData();
  59
  60   var g = new Dygraph(
  61     document.getElementById("graph"),
  62     data,
  63     {
  64       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  65       width: 640,
  66       height: 350,
  67       'Y3': {
  68         axis: { }
  69       },
  70       'Y4': {
  71         axis: 'Y3'  // use the same y-axis as series Y3
  72       },
  73       axes: {
  74         y2: {
  75           labelsKMB: true
  76         }
  77       }
  78     }
  79   );
  80
  81   assertEquals(["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"], Util.getYLabels("1"));
  82   assertEquals(["900K", "1.01M", "1.12M", "1.23M", "1.34M", "1.45M", "1.55M", "1.66M", "1.77M", "1.88M", "1.99M"], Util.getYLabels("2"));
  83 };
  84
  85 MultipleAxesOldTestCase.prototype.testOldMultiAxisLayout = function() {
  86   var data = MultipleAxesTestCase.getData();
  87
  88   var el = document.getElementById("graph");
  89
  90   var g = new Dygraph(
  91     el,
  92     data,
  93     {
  94       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  95       width: 640,
  96       height: 350,
  97       'Y3': {
  98         axis: { }
  99       },
 100       'Y4': {
 101         axis: 'Y3'  // use the same y-axis as series Y3
 102       },
 103       axes: {
 104         y2: {
 105           labelsKMB: true
 106         }
 107       }
 108     }
 109   );
 110
 111   // Test that all elements are inside the bounds of the graph, set above
 112   var innerDiv = el.firstChild;
 113   for (var child = innerDiv.firstChild; child != null; child = child.nextSibling) {
 114     assertTrue(child.offsetLeft >= 0);
 115     assertTrue((child.offsetLeft + child.offsetWidth) <= 640);
 116     assertTrue(child.offsetTop >= 0);
 117     // TODO(flooey@google.com): Text sometimes linebreaks,
 118     // causing the labels to appear outside the allocated area.
 119     // assertTrue((child.offsetTop + child.offsetHeight) <= 350);
 120   }
 121 };
 122
 123 MultipleAxesOldTestCase.prototype.testOldTwoAxisVisibility = function() {
 124   var data = [];
 125   data.push([0,0,0]);
 126   data.push([1,2,2000]);
 127   data.push([2,4,1000]);
 128
 129   var g = new Dygraph(
 130     document.getElementById("graph"),
 131     data,
 132     {
 133       labels: [ 'X', 'bar', 'zot' ],
 134       'zot': {
 135         axis: {
 136           labelsKMB: true
 137         }
 138       }
 139     }
 140   );
 141
 142   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
 143   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 144
 145   g.setVisibility(0, false);
 146
 147   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
 148   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 149
 150   g.setVisibility(0, true);
 151   g.setVisibility(1, false);
 152
 153   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
 154   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 155 };
 156
 157 // verifies that all four chart labels (title, x-, y-, y2-axis label) can be
 158 // used simultaneously.
 159 MultipleAxesOldTestCase.prototype.testOldMultiChartLabels = function() {
 160   var data = MultipleAxesTestCase.getData();
 161
 162   var el = document.getElementById("graph");
 163   el.style.border = '1px solid black';
 164   el.style.marginLeft = '200px';
 165   el.style.marginTop = '200px';
 166
 167   var g = new Dygraph(
 168     el,
 169     data,
 170     {
 171       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 172       width: 640,
 173       height: 350,
 174       'Y3': {
 175         axis: { }
 176       },
 177       'Y4': {
 178         axis: 'Y3'  // use the same y-axis as series Y3
 179       },
 180       xlabel: 'x-axis',
 181       ylabel: 'y-axis',
 182       y2label: 'y2-axis',
 183       title: 'Chart title'
 184     }
 185   );
 186
 187   assertEquals(["Chart title", "x-axis", "y-axis", "y2-axis"],
 188                Util.getClassTexts("dygraph-label"));
 189   assertEquals(["Chart title"], Util.getClassTexts("dygraph-title"));
 190   assertEquals(["x-axis"], Util.getClassTexts("dygraph-xlabel"));
 191   assertEquals(["y-axis"], Util.getClassTexts("dygraph-ylabel"));
 192   assertEquals(["y2-axis"], Util.getClassTexts("dygraph-y2label"));
 193
 194   // TODO(danvk): check relative positioning here: title on top, y left of y2.
 195 };
 196
 197 // Check that a chart w/o a secondary y-axis will not get a y2label, even if one
 198 // is specified.
 199 MultipleAxesOldTestCase.prototype.testOldNoY2LabelWithoutSecondaryAxis = function() {
 200   var g = new Dygraph(
 201     document.getElementById("graph"),
 202     MultipleAxesTestCase.getData(),
 203     {
 204       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 205       width: 640,
 206       height: 350,
 207       xlabel: 'x-axis',
 208       ylabel: 'y-axis',
 209       y2label: 'y2-axis',
 210       title: 'Chart title'
 211     }
 212   );
 213
 214   assertEquals(["Chart title", "x-axis", "y-axis"],
 215                Util.getClassTexts("dygraph-label"));
 216   assertEquals(["Chart title"], Util.getClassTexts("dygraph-title"));
 217   assertEquals(["x-axis"], Util.getClassTexts("dygraph-xlabel"));
 218   assertEquals(["y-axis"], Util.getClassTexts("dygraph-ylabel"));
 219   assertEquals([], Util.getClassTexts("dygraph-y2label"));
 220 };
 221
 222 MultipleAxesOldTestCase.prototype.testOldValueRangePerAxisOptions = function() {
 223   var data = MultipleAxesTestCase.getData();
 224
 225   g = new Dygraph(
 226     document.getElementById("graph"),
 227     data,
 228     {
 229       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 230       'Y3': {
 231         axis: {
 232         }
 233       },
 234       'Y4': {
 235         axis: 'Y3'  // use the same y-axis as series Y3
 236       },
 237       axes: {
 238         y: {
 239           valueRange: [40, 70]
 240         },
 241         y2: {
 242           // set axis-related properties here
 243           labelsKMB: true
 244         }
 245       },
 246       ylabel: 'Primary y-axis',
 247       y2label: 'Secondary y-axis',
 248       yAxisLabelWidth: 60
 249     }
 250   );
 251   assertEquals(["40", "45", "50", "55", "60", "65"], Util.getYLabels("1"));
 252   assertEquals(["900K","1.1M","1.3M","1.5M","1.7M","1.9M"], Util.getYLabels("2"));
 253
 254   g.updateOptions(
 255     {
 256       axes: {
 257         y: {
 258           valueRange: [40, 80]
 259         },
 260         y2: {
 261           valueRange: [1e6, 1.2e6]
 262         }
 263      }
 264     }
 265   );
 266   assertEquals(["40", "45", "50", "55", "60", "65", "70", "75"], Util.getYLabels("1"));
 267   assertEquals(["1M", "1.02M", "1.05M", "1.08M", "1.1M", "1.13M", "1.15M", "1.18M"], Util.getYLabels("2"));
 268 };
 269
 270 MultipleAxesOldTestCase.prototype.testOldDrawPointCallback = function() {
 271   var data = MultipleAxesTestCase.getData();
 272
 273   var results = { y : {}, y2 : {}};
 274   var firstCallback = function(g, seriesName, ctx, canvasx, canvasy, color, radius) {
 275     results.y[seriesName] = 1;
 276     Dygraph.Circles.DEFAULT(g, seriesName, ctx, canvasx, canvasy, color, radius);
 277
 278   };
 279   var secondCallback = function(g, seriesName, ctx, canvasx, canvasy, color, radius) {
 280     results.y2[seriesName] = 1;
 281     Dygraph.Circles.TRIANGLE(g, seriesName, ctx, canvasx, canvasy, color, radius);
 282   };
 283
 284   g = new Dygraph(
 285     document.getElementById("graph"),
 286     data,
 287     {
 288       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 289       drawPoints : true,
 290       pointSize : 3,
 291       'Y3': {
 292         axis: {
 293         }
 294       },
 295       'Y4': {
 296         axis: 'Y3'  // use the same y-axis as series Y3
 297       },
 298       axes: {
 299         y2: {
 300           drawPointCallback: secondCallback
 301         }
 302       },
 303       drawPointCallback: firstCallback
 304     }
 305   );
 306
 307   assertEquals(1, results.y["Y1"]);
 308   assertEquals(1, results.y["Y2"]);
 309   assertEquals(1, results.y2["Y3"]);
 310   assertEquals(1, results.y2["Y4"]);
 311 };