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.prototype.setUp = function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 };
  11
  12 stackedTestCase.prototype.tearDown = function() {
  13 };
  14
  15 stackedTestCase.prototype.testCorrectColors = function() {
  16   var opts = {
  17     width: 400,
  18     height: 300,
  19     stackedGraph: true,
  20     drawXGrid: false,
  21     drawYGrid: false,
  22     drawXAxis: false,
  23     drawYAxis: false,
  24     valueRange: [0, 3],
  25     colors: ['#00ff00', '#0000ff'],
  26     fillAlpha: 0.15
  27   };
  28   var data = "X,Y1,Y2\n" +
  29       "0,1,1\n" +
  30       "1,1,1\n" +
  31       "2,1,1\n" +
  32       "3,1,1\n"
  33   ;
  34
  35   var graph = document.getElementById("graph");
  36   var g = new Dygraph(graph, data, opts);
  37
  38   // y pixels 299-201 = y2 = transparent blue
  39   // y pixel 200 = y2 line (blue)
  40   // y pixels 199-101 = y1 = transparent green
  41   // y pixel 100 = y1 line (green)
  42   // y pixels 0-99 = nothing (white)
  43
  44   // TODO(danvk): factor this and getPixel() into a utility usable by all tests.
  45   var ctx = g.hidden_ctx_;
  46   var imageData = ctx.getImageData(0, 0, 400, 300);
  47
  48   assertEquals(400, imageData.width);
  49   assertEquals(300, imageData.height);
  50
  51   // returns an (r, g, b, alpha) tuple for the pixel.
  52   // values are in [0, 255].
  53   var getPixel = function(imageData, x, y) {
  54     var i = 4 * (x + imageData.width * y);
  55     var d = imageData.data;
  56     return [d[i], d[i+1], d[i+2], d[i+3]];
  57   };
  58
  59   // 38 = round(0.15 * 255)
  60   assertEquals([0, 0, 255, 38], getPixel(imageData, 200, 250));
  61   assertEquals([0, 255, 0, 38], getPixel(imageData, 200, 150));
  62 };
  63
  64 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
  65 stackedTestCase.prototype.testSelectionValues = function() {
  66   var opts = {
  67     stackedGraph: true
  68   };
  69   var data = "X,Y1,Y2\n" +
  70       "0,1,1\n" +
  71       "1,1,1\n" +
  72       "2,1,1\n" +
  73       "3,1,1\n"
  74   ;
  75
  76   var graph = document.getElementById("graph");
  77   g = new Dygraph(graph, data, opts);
  78
  79   g.setSelection(0);
  80
  81   assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
  82
  83   // Verify that the behavior is correct with highlightSeriesOpts as well.
  84   g.updateOptions({
  85     highlightSeriesOpts: {
  86       strokeWidth: 10
  87     }
  88   });
  89   g.setSelection(0);
  90   assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
  91
  92   g.setSelection(1);
  93   assertEquals("1: Y1: 1 Y2: 1", Util.getLegend());
  94
  95   g.setSelection(0, 'Y2');
  96   assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
  97 };
  98
  99 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
 100 stackedTestCase.prototype.testDuplicatedXValue = function() {
 101   var opts = {
 102     stackedGraph: true,
 103     fillAlpha: 0.15,
 104     colors: ['#00ff00'],
 105     width: 400,
 106     height: 300
 107   };
 108   var data = "X,Y1\n" +
 109       "0,1\n" +
 110       "1,1\n" +
 111       "2,1\n" +
 112       "2,1\n" +  // duplicate x-value!
 113       "3,1\n"
 114   ;
 115
 116   var graph = document.getElementById("graph");
 117   g = new Dygraph(graph, data, opts);
 118
 119   assert(g.yAxisRange()[1] < 2);
 120
 121   assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
 122   assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
 123 }
 124
 125 // Validates regression when null values in stacked graphs show up
 126 // incorrectly in the legend.
 127 stackedTestCase.prototype.testNullValues = function() {
 128   var opts = {
 129     stackedGraph: true,
 130     stepPlot:true
 131   };
 132   var data = "X,Y1,Y2,Y3\n" +
 133       "0,-5,-1,1\n" +
 134       "1,1,,1\n" +
 135       "2,1,2,3\n" +
 136       "3,3,,4\n" +
 137       "4,3,2,3\n"
 138   ;
 139
 140   var graph = document.getElementById("graph");
 141   g = new Dygraph(graph, data, opts);
 142
 143   g.setSelection(0);
 144   assertEquals("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());
 145
 146   g.setSelection(1);
 147   assertEquals("1: Y1: 1 Y3: 1", Util.getLegend());
 148
 149   g.setSelection(2);
 150   assertEquals("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());
 151
 152   g.setSelection(3);
 153   assertEquals("3: Y1: 3 Y3: 4", Util.getLegend());
 154
 155   g.setSelection(4);
 156   assertEquals("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
 157 };
 158
 159 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
 160 stackedTestCase.prototype.testMissingValueAtZero = function() {
 161   var opts = {
 162     stackedGraph: true
 163   };
 164   var data = "X,Y1,Y2\n" +
 165       "0,,1\n" +
 166       "1,1,2\n" +
 167       "2,,3\n"
 168   ;
 169
 170   var graph = document.getElementById("graph");
 171   g = new Dygraph(graph, data, opts);
 172
 173   g.setSelection(0);
 174   assertEquals("0: Y2: 1", Util.getLegend());
 175
 176   g.setSelection(1);
 177   assertEquals("1: Y1: 1 Y2: 2", Util.getLegend());
 178
 179   g.setSelection(2);
 180   assertEquals("2: Y2: 3", Util.getLegend());
 181 };