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 };