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