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 MultipleAxesTestCase.getData = function() {
  28   var data = [];
  29   for (var i = 1; i <= 100; i++) {
  30     var m = "01", d = i;
  31     if (d > 31) { m = "02"; d -= 31; }
  32     if (m == "02" && d > 28) { m = "03"; d -= 28; }
  33     if (m == "03" && d > 31) { m = "04"; d -= 31; }
  34     if (d < 10) d = "0" + d;
  35     // two series, one with range 1-100, one with range 1-2M
  36     data.push([new Date("2010/" + m + "/" + d),
  37                i,
  38                100 - i,
  39                1e6 * (1 + i * (100 - i) / (50 * 50)),
  40                1e6 * (2 - i * (100 - i) / (50 * 50))]);
  41   }
  42   return data;
  43 };
  44
  45 MultipleAxesTestCase.prototype.testBasicMultipleAxes = function() {
  46   var data = MultipleAxesTestCase.getData();
  47
  48   g = new Dygraph(
  49     document.getElementById("graph"),
  50     data,
  51     {
  52       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  53       width: 640,
  54       height: 350,
  55       'Y3': {
  56         axis: {
  57           // set axis-related properties here
  58           labelsKMB: true
  59         }
  60       },
  61       'Y4': {
  62         axis: 'Y3'  // use the same y-axis as series Y3
  63       }
  64     }
  65   );
  66
  67   assertEquals(["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"], getYLabelsForAxis("1"));
  68   assertEquals(["900K", "1.01M", "1.12M", "1.23M", "1.34M", "1.45M", "1.55M", "1.66M", "1.77M", "1.88M", "1.99M"], getYLabelsForAxis("2"));
  69 };
  70
  71 MultipleAxesTestCase.prototype.testNewStylePerAxisOptions = function() {
  72   var data = MultipleAxesTestCase.getData();
  73
  74   g = new Dygraph(
  75     document.getElementById("graph"),
  76     data,
  77     {
  78       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  79       width: 640,
  80       height: 350,
  81       'Y3': {
  82         axis: { }
  83       },
  84       'Y4': {
  85         axis: 'Y3'  // use the same y-axis as series Y3
  86       },
  87       axes: {
  88         y2: {
  89           labelsKMB: true
  90         }
  91       }
  92     }
  93   );
  94
  95   assertEquals(["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"], getYLabelsForAxis("1"));
  96   assertEquals(["900K", "1.01M", "1.12M", "1.23M", "1.34M", "1.45M", "1.55M", "1.66M", "1.77M", "1.88M", "1.99M"], getYLabelsForAxis("2"));
  97 };
  98
  99 MultipleAxesTestCase.prototype.testMultiAxisLayout = function() {
 100   var data = MultipleAxesTestCase.getData();
 101
 102   var el = document.getElementById("graph");
 103
 104   g = new Dygraph(
 105     el,
 106     data,
 107     {
 108       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 109       width: 640,
 110       height: 350,
 111       'Y3': {
 112         axis: { }
 113       },
 114       'Y4': {
 115         axis: 'Y3'  // use the same y-axis as series Y3
 116       },
 117       axes: {
 118         y2: {
 119           labelsKMB: true
 120         }
 121       }
 122     }
 123   );
 124
 125   // Test that all elements are inside the bounds of the graph, set above
 126   var innerDiv = el.firstChild;
 127   for (var child = innerDiv.firstChild; child != null; child = child.nextSibling) {
 128     assertTrue(child.offsetLeft >= 0);
 129     assertTrue((child.offsetLeft + child.offsetWidth) <= 640);
 130     assertTrue(child.offsetTop >= 0);
 131     // TODO(flooey@google.com): Text sometimes linebreaks,
 132     // causing the labels to appear outside the allocated area.
 133     // assertTrue((child.offsetTop + child.offsetHeight) <= 350);
 134   }
 135 };
 136
 137 MultipleAxesTestCase.prototype.testTwoAxisVisibility = function() {
 138   var data = [];
 139   data.push([0,0,0]);
 140   data.push([1,2,2000]);
 141   data.push([2,4,1000]);
 142
 143   var g = new Dygraph(
 144     document.getElementById("graph"),
 145     data,
 146     {
 147       labels: [ 'X', 'bar', 'zot' ],
 148       'zot': {
 149         axis: {
 150           labelsKMB: true
 151         }
 152       }
 153     }
 154   );
 155
 156   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
 157   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 158
 159   g.setVisibility(0, false);
 160
 161   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
 162   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 163
 164   g.setVisibility(0, true);
 165   g.setVisibility(1, false);
 166
 167   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
 168   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 169 };
 170
 171 // verifies that all four chart labels (title, x-, y-, y2-axis label) can be
 172 // used simultaneously.
 173 MultipleAxesTestCase.prototype.testMultiChartLabels = function() {
 174   var data = MultipleAxesTestCase.getData();
 175
 176   var el = document.getElementById("graph");
 177   el.style.border = '1px solid black';
 178   el.style.marginLeft = '200px';
 179   el.style.marginTop = '200px';
 180
 181   g = new Dygraph(
 182     el,
 183     data,
 184     {
 185       labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 186       width: 640,
 187       height: 350,
 188       'Y3': {
 189         axis: { }
 190       },
 191       'Y4': {
 192         axis: 'Y3'  // use the same y-axis as series Y3
 193       },
 194       xlabel: 'x-axis',
 195       ylabel: 'y-axis',
 196       y2label: 'y2-axis',
 197       title: 'Chart title'
 198     }
 199   );
 200
 201   // returns all text in tags w/ a given css class, sorted.
 202   function getTexts(css_class) {
 203     var texts = [];
 204     var els = document.getElementsByClassName(css_class);
 205     for (var i = 0; i < els.length; i++) {
 206       texts[i] = els[i].textContent;
 207     }
 208     texts.sort();
 209     return texts;
 210   }
 211
 212   assertEquals(["Chart title", "x-axis", "y-axis", "y2-axis"],
 213                getTexts("dygraph-label"));
 214   assertEquals(["Chart title"], getTexts("dygraph-title"));
 215   assertEquals(["x-axis"], getTexts("dygraph-xlabel"));
 216   assertEquals(["y-axis"], getTexts("dygraph-ylabel"));
 217   assertEquals(["y2-axis"], getTexts("dygraph-y2label"));
 218
 219   // TODO(danvk): check relative positioning here: title on top, y left of y2.
 220 };