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 MultipleAxesTestCase.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 MultipleAxesTestCase.prototype.testBasicMultipleAxes = 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       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   assertEquals(["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"], Util.getYLabels("1"));
  59   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"));
  60 };
  61
  62 MultipleAxesTestCase.prototype.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   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
  87   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
  88
  89   g.setVisibility(0, false);
  90
  91   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
  92   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
  93
  94   g.setVisibility(0, true);
  95   g.setVisibility(1, false);
  96
  97   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
  98   assertTrue(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 MultipleAxesTestCase.prototype.testMultiChartLabels = function() {
 104   var data = MultipleAxesTestCase.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   assertEquals(["Chart title", "x-axis", "y-axis", "y2-axis"],
 134                Util.getClassTexts("dygraph-label"));
 135   assertEquals(["Chart title"], Util.getClassTexts("dygraph-title"));
 136   assertEquals(["x-axis"], Util.getClassTexts("dygraph-xlabel"));
 137   assertEquals(["y-axis"], Util.getClassTexts("dygraph-ylabel"));
 138   assertEquals(["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 MultipleAxesTestCase.prototype.testNoY2LabelWithoutSecondaryAxis = function() {
 146   var g = new Dygraph(
 147     document.getElementById("graph"),
 148     MultipleAxesTestCase.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   assertEquals(["Chart title", "x-axis", "y-axis"],
 161                Util.getClassTexts("dygraph-label"));
 162   assertEquals(["Chart title"], Util.getClassTexts("dygraph-title"));
 163   assertEquals(["x-axis"], Util.getClassTexts("dygraph-xlabel"));
 164   assertEquals(["y-axis"], Util.getClassTexts("dygraph-ylabel"));
 165   assertEquals([], Util.getClassTexts("dygraph-y2label"));
 166 };
 167
 168 MultipleAxesTestCase.prototype.testValueRangePerAxisOptions = function() {
 169   var data = MultipleAxesTestCase.getData();
 170
 171   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           valueRange: [40, 70]
 187         },
 188         y2: {
 189           // set axis-related properties here
 190           labelsKMB: true
 191         }
 192       },
 193       ylabel: 'Primary y-axis',
 194       y2label: 'Secondary y-axis',
 195       yAxisLabelWidth: 60
 196     }
 197   );
 198   assertEquals(["40", "45", "50", "55", "60", "65"], Util.getYLabels("1"));
 199   assertEquals(["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   assertEquals(["40", "45", "50", "55", "60", "65", "70", "75"], Util.getYLabels("1"));
 214   assertEquals(["1M", "1.02M", "1.05M", "1.08M", "1.1M", "1.13M", "1.15M", "1.18M"], Util.getYLabels("2"));
 215 };
 216
 217 MultipleAxesTestCase.prototype.testDrawPointCallback = function() {
 218   var data = MultipleAxesTestCase.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.TRIANGLE(g, seriesName, ctx, canvasx, canvasy, color, radius);
 229   };
 230
 231   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   assertEquals(1, results.y["Y1"]);
 256   assertEquals(1, results.y["Y2"]);
 257   assertEquals(1, results.y2["Y3"]);
 258   assertEquals(1, results.y2["Y4"]);
 259 };