auto_tests/tests/stacked.js

   1 /**
   2  * @fileoverview Tests using the "stackedGraph" option.
   3  *
   4  * @author dan@dygraphs.com (Dan Vanderkam)
   5  */
   6 var stackedTestCase = TestCase("stacked");
   7
   8 stackedTestCase._origGetContext = Dygraph.getContext;
   9
  10 stackedTestCase.prototype.setUp = function() {
  11   document.body.innerHTML = "<div id='graph'></div>";
  12   Dygraph.getContext = function(canvas) {
  13     return new Proxy(stackedTestCase._origGetContext(canvas));
  14   }
  15 };
  16
  17 stackedTestCase.prototype.tearDown = function() {
  18   Dygraph.getContext = stackedTestCase._origGetContext;
  19 };
  20
  21 stackedTestCase.prototype.testCorrectColors = function() {
  22   var opts = {
  23     width: 400,
  24     height: 300,
  25     stackedGraph: true,
  26     drawXGrid: false,
  27     drawYGrid: false,
  28     drawXAxis: false,
  29     drawYAxis: false,
  30     valueRange: [0, 3],
  31     colors: ['#00ff00', '#0000ff'],
  32     fillAlpha: 0.15
  33   };
  34   var data = "X,Y1,Y2\n" +
  35       "0,1,1\n" +
  36       "1,1,1\n" +
  37       "2,1,1\n" +
  38       "3,1,1\n"
  39   ;
  40
  41   var graph = document.getElementById("graph");
  42   var g = new Dygraph(graph, data, opts);
  43
  44   // y pixels 299-201 = y2 = transparent blue
  45   // y pixel 200 = y2 line (blue)
  46   // y pixels 199-101 = y1 = transparent green
  47   // y pixel 100 = y1 line (green)
  48   // y pixels 0-99 = nothing (white)
  49
  50   // 38 = round(0.15 * 255)
  51   assertEquals([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 250));
  52   assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 150));
  53 };
  54
  55 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
  56 stackedTestCase.prototype.testSelectionValues = function() {
  57   var opts = {
  58     stackedGraph: true
  59   };
  60   var data = "X,Y1,Y2\n" +
  61       "0,1,1\n" +
  62       "1,1,1\n" +
  63       "2,1,1\n" +
  64       "3,1,1\n"
  65   ;
  66
  67   var graph = document.getElementById("graph");
  68   g = new Dygraph(graph, data, opts);
  69
  70   g.setSelection(0);
  71
  72   assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
  73
  74   // Verify that the behavior is correct with highlightSeriesOpts as well.
  75   g.updateOptions({
  76     highlightSeriesOpts: {
  77       strokeWidth: 10
  78     }
  79   });
  80   g.setSelection(0);
  81   assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
  82
  83   g.setSelection(1);
  84   assertEquals("1: Y1: 1 Y2: 1", Util.getLegend());
  85
  86   g.setSelection(0, 'Y2');
  87   assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
  88 };
  89
  90 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
  91 stackedTestCase.prototype.testDuplicatedXValue = function() {
  92   var opts = {
  93     stackedGraph: true,
  94     fillAlpha: 0.15,
  95     colors: ['#00ff00'],
  96     width: 400,
  97     height: 300
  98   };
  99   var data = "X,Y1\n" +
 100       "0,1\n" +
 101       "1,1\n" +
 102       "2,1\n" +
 103       "2,1\n" +  // duplicate x-value!
 104       "3,1\n"
 105   ;
 106
 107   var graph = document.getElementById("graph");
 108   g = new Dygraph(graph, data, opts);
 109
 110   assert(g.yAxisRange()[1] < 2);
 111
 112   assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
 113   assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
 114 }
 115
 116 // Validates regression when null values in stacked graphs show up
 117 // incorrectly in the legend.
 118 stackedTestCase.prototype.testNullValues = function() {
 119   var opts = {
 120     stackedGraph: true,
 121     stepPlot:true
 122   };
 123   var data = "X,Y1,Y2,Y3\n" +
 124       "0,-5,-1,1\n" +
 125       "1,1,,1\n" +
 126       "2,1,2,3\n" +
 127       "3,3,,4\n" +
 128       "4,3,2,3\n"
 129   ;
 130
 131   var graph = document.getElementById("graph");
 132   g = new Dygraph(graph, data, opts);
 133
 134   g.setSelection(0);
 135   assertEquals("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());
 136
 137   g.setSelection(1);
 138   assertEquals("1: Y1: 1 Y3: 1", Util.getLegend());
 139
 140   g.setSelection(2);
 141   assertEquals("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());
 142
 143   g.setSelection(3);
 144   assertEquals("3: Y1: 3 Y3: 4", Util.getLegend());
 145
 146   g.setSelection(4);
 147   assertEquals("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
 148 };
 149
 150 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
 151 stackedTestCase.prototype.testMissingValueAtZero = function() {
 152   var opts = {
 153     stackedGraph: true
 154   };
 155   var data = "X,Y1,Y2\n" +
 156       "0,,1\n" +
 157       "1,1,2\n" +
 158       "2,,3\n"
 159   ;
 160
 161   var graph = document.getElementById("graph");
 162   g = new Dygraph(graph, data, opts);
 163
 164   g.setSelection(0);
 165   assertEquals("0: Y2: 1", Util.getLegend());
 166
 167   g.setSelection(1);
 168   assertEquals("1: Y1: 1 Y2: 2", Util.getLegend());
 169
 170   g.setSelection(2);
 171   assertEquals("2: Y2: 3", Util.getLegend());
 172 };
 173
 174 stackedTestCase.prototype.testInterpolation = function() {
 175   var opts = {
 176     colors: ['#ff0000', '#00ff00', '#0000ff'],
 177     stackedGraph: true
 178   };
 179
 180   // The last series is all-NaN, it ought to be treated as all zero
 181   // for stacking purposes.
 182   var N = NaN;
 183   var data = [
 184     [100, 1, 2, N, N],
 185     [101, 1, 2, 2, N],
 186     [102, 1, N, N, N],
 187     [103, 1, 2, 4, N],
 188     [104, N, N, N, N],
 189     [105, 1, 2, N, N],
 190     [106, 1, 2, 7, N],
 191     [107, 1, 2, 8, N],
 192     [108, 1, 2, 9, N],
 193     [109, 1, N, N, N]];
 194
 195   var graph = document.getElementById("graph");
 196   g = new Dygraph(graph, data, opts);
 197
 198   var htx = g.hidden_ctx_;
 199   var attrs = {};
 200
 201   // Check that lines are drawn at the expected positions, using
 202   // interpolated values for missing data.
 203   CanvasAssertions.assertLineDrawn(
 204       htx, g.toDomCoords(100, 4), g.toDomCoords(101, 4), {strokeStyle: '#00ff00'});
 205   CanvasAssertions.assertLineDrawn(
 206       htx, g.toDomCoords(102, 6), g.toDomCoords(103, 7), {strokeStyle: '#ff0000'});
 207   CanvasAssertions.assertLineDrawn(
 208       htx, g.toDomCoords(107, 8), g.toDomCoords(108, 9), {strokeStyle: '#0000ff'});
 209   CanvasAssertions.assertLineDrawn(
 210       htx, g.toDomCoords(108, 12), g.toDomCoords(109, 12), {strokeStyle: '#ff0000'});
 211
 212   // Check that the expected number of line segments gets drawn
 213   // for each series. Gaps don't get a line.
 214   assertEquals(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 215   assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
 216   assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
 217
 218   // Check that the selection returns the original (non-stacked)
 219   // values and skips gaps.
 220   g.setSelection(1);
 221   assertEquals("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
 222
 223   g.setSelection(8);
 224   assertEquals("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
 225
 226   g.setSelection(9);
 227   assertEquals("109: Y1: 1", Util.getLegend());
 228 };
 229
 230 stackedTestCase.prototype.testInterpolationOptions = function() {
 231   var opts = {
 232     colors: ['#ff0000', '#00ff00', '#0000ff'],
 233     stackedGraph: true
 234   };
 235
 236   var data = [
 237     [100, 1, NaN, 3],
 238     [101, 1, 2, 3],
 239     [102, 1, NaN, 3],
 240     [103, 1, 2, 3],
 241     [104, 1, NaN, 3]];
 242
 243   var choices = ['all', 'inside', 'none'];
 244   var stackedY = [
 245     [6, 6, 6, 6, 6],
 246     [4, 6, 6, 6, 4],
 247     [4, 6, 4, 6, 4]];
 248
 249   for (var i = 0; i < choices.length; ++i) {
 250     var graph = document.getElementById("graph");
 251     opts['stackedGraphNaNFill'] = choices[i];
 252     g = new Dygraph(graph, data, opts);
 253
 254     var htx = g.hidden_ctx_;
 255     var attrs = {};
 256
 257     // Check top lines get drawn at the expected positions.
 258     for (var j = 0; j < stackedY[i].length - 1; ++j) {
 259       CanvasAssertions.assertLineDrawn(
 260           htx,
 261           g.toDomCoords(100 + j, stackedY[i][j]),
 262           g.toDomCoords(101 + j, stackedY[i][j + 1]),
 263           {strokeStyle: '#ff0000'});
 264     }
 265   }
 266 };
 267
 268 stackedTestCase.prototype.testMultiAxisInterpolation = function() {
 269   // Setting 2 axes to test that each axis stacks separately
 270   var opts = {
 271     colors: ['#ff0000', '#00ff00', '#0000ff'],
 272     stackedGraph: true,
 273     series: {
 274         "Y1": {
 275             axis: 'y',
 276         },
 277         "Y2": {
 278             axis: 'y',
 279         },
 280         "Y3": {
 281             axis: 'y2',
 282         },
 283         "Y4": {
 284             axis: 'y2',
 285         }
 286     }
 287   };
 288
 289   // The last series is all-NaN, it ought to be treated as all zero
 290   // for stacking purposes.
 291   var N = NaN;
 292   var data = [
 293     [100, 1, 2, N, N],
 294     [101, 1, 2, 2, N],
 295     [102, 1, N, N, N],
 296     [103, 1, 2, 4, N],
 297     [104, N, N, N, N],
 298     [105, 1, 2, N, N],
 299     [106, 1, 2, 7, N],
 300     [107, 1, 2, 8, N],
 301     [108, 1, 2, 9, N],
 302     [109, 1, N, N, N]];
 303
 304   var graph = document.getElementById("graph");
 305   g = new Dygraph(graph, data, opts);
 306
 307   var htx = g.hidden_ctx_;
 308   var attrs = {};
 309
 310   // Check that lines are drawn at the expected positions, using
 311   // interpolated values for missing data.
 312   CanvasAssertions.assertLineDrawn(
 313       htx, g.toDomCoords(100, 2), g.toDomCoords(101, 2), {strokeStyle: '#00ff00'});
 314   CanvasAssertions.assertLineDrawn(
 315       htx, g.toDomCoords(102, 3), g.toDomCoords(103, 3), {strokeStyle: '#ff0000'});
 316   CanvasAssertions.assertLineDrawn(
 317       htx, g.toDomCoords(107, 2.71), g.toDomCoords(108, 3), {strokeStyle: '#0000ff'});
 318   CanvasAssertions.assertLineDrawn(
 319       htx, g.toDomCoords(108, 3), g.toDomCoords(109, 3), {strokeStyle: '#ff0000'});
 320
 321   // Check that the expected number of line segments gets drawn
 322   // for each series. Gaps don't get a line.
 323   assertEquals(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
 324   assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
 325   assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
 326
 327   // Check that the selection returns the original (non-stacked)
 328   // values and skips gaps.
 329   g.setSelection(1);
 330   assertEquals("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
 331
 332   g.setSelection(8);
 333   assertEquals("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
 334
 335   g.setSelection(9);
 336   assertEquals("109: Y1: 1", Util.getLegend());
 337 };