auto_tests/tests/error_bars.js

   1 /**
   2  * @fileoverview FILL THIS IN
   3  *
   4  * @author danvk@google.com (Dan Vanderkam)
   5  */
   6 var errorBarsTestCase = TestCase("error-bars");
   7
   8 errorBarsTestCase.prototype.setUp = function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 };
  11
  12 errorBarsTestCase._origFunc = Dygraph.getContext;
  13 errorBarsTestCase.prototype.setUp = function() {
  14   document.body.innerHTML = "<div id='graph'></div>";
  15   Dygraph.getContext = function(canvas) {
  16     return new Proxy(errorBarsTestCase._origFunc(canvas));
  17   }
  18 };
  19
  20 errorBarsTestCase.prototype.tearDown = function() {
  21   Dygraph.getContext = errorBarsTestCase._origFunc;
  22 };
  23
  24 errorBarsTestCase.prototype.testErrorBarsDrawn = function() {
  25   var opts = {
  26     width: 480,
  27     height: 320,
  28     drawXGrid: false,
  29     drawYGrid: false,
  30     drawXAxis: false,
  31     drawYAxis: false,
  32     customBars: true,
  33     errorBars: true
  34   };
  35   var data = [
  36                [1, [10,  10, 100]],
  37                [2, [15,  20, 110]],
  38                [3, [10,  30, 100]],
  39                [4, [15,  40, 110]],
  40                [5, [10, 120, 100]],
  41                [6, [15,  50, 110]],
  42                [7, [10,  70, 100]],
  43                [8, [15,  90, 110]],
  44                [9, [10,  50, 100]]
  45              ];
  46
  47   var graph = document.getElementById("graph");
  48   var g = new Dygraph(graph, data, opts);
  49
  50   htx = g.hidden_ctx_;
  51
  52   var attrs = {};  // TODO(danvk): fill in
  53
  54   for (var i = 0; i < data.length - 1; i++) {
  55     // bottom line
  56     var xy1 = g.toDomCoords(data[i][0], data[i][1][0]);
  57     var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][0]);
  58     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  59
  60     // top line
  61     xy1 = g.toDomCoords(data[i][0], data[i][1][2]);
  62     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][2]);
  63     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  64
  65     // middle line
  66     xy1 = g.toDomCoords(data[i][0], data[i][1][1]);
  67     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][1]);
  68     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  69   }
  70
  71   g.updateOptions({logscale: true});
  72
  73   for (var i = 0; i < data.length - 1; i++) {
  74     // bottom line
  75     var xy1 = g.toDomCoords(data[i][0], data[i][1][0]);
  76     var xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][0]);
  77     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  78
  79     // top line
  80     xy1 = g.toDomCoords(data[i][0], data[i][1][2]);
  81     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][2]);
  82     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  83
  84     // middle line
  85     xy1 = g.toDomCoords(data[i][0], data[i][1][1]);
  86     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][1]);
  87     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
  88   }
  89   CanvasAssertions.assertBalancedSaveRestore(htx);
  90 };
  91
  92 errorBarsTestCase.prototype.testErrorBarsCorrectColors = function() {
  93   // Two constant series with constant error.
  94   var data = [
  95     [0, [100, 50], [200, 50]],
  96     [1, [100, 50], [200, 50]]
  97   ];
  98
  99   var opts = {
 100     errorBars: true,
 101     sigma: 1.0,
 102     fillAlpha: 0.15,
 103     colors: ['#00ff00', '#0000ff'],
 104     drawXGrid: false,
 105     drawYGrid: false,
 106     drawXAxis: false,
 107     drawYAxis: false,
 108     width: 400,
 109     height: 300,
 110     valueRange: [0, 300],
 111     labels: ['X', 'Y1', 'Y2']
 112   };
 113   var graph = document.getElementById("graph");
 114   var g = new Dygraph(graph, data, opts);
 115
 116   // y-pixels (0=top, 299=bottom)
 117   //   0- 48: empty (white)
 118   //  49- 98: Y2 error bar
 119   //  99:     Y2 center line
 120   // 100-148: Y2 error bar
 121   // 149-198: Y1 error bar
 122   // 199:     Y1 center line
 123   // 200-248: Y1 error bar
 124   // 249-299: empty (white)
 125   // TODO(danvk): test the edges of these regions.
 126
 127   var ctx = g.hidden_.getContext("2d");  // bypass Proxy
 128   var imageData = ctx.getImageData(0, 0, 400, 300);
 129
 130   assertEquals(400, imageData.width);
 131   assertEquals(300, imageData.height);
 132
 133   // returns an (r, g, b, alpha) tuple for the pixel.
 134   // values are in [0, 255].
 135   var getPixel = function(imageData, x, y) {
 136     var i = 4 * (x + imageData.width * y);
 137     var d = imageData.data;
 138     return [d[i], d[i+1], d[i+2], d[i+3]];
 139   };
 140
 141   assertEquals([0, 0, 255, 38], getPixel(imageData, 200, 75));
 142   assertEquals([0, 0, 255, 38], getPixel(imageData, 200, 125));
 143   assertEquals([0, 255, 0, 38], getPixel(imageData, 200, 175));
 144   assertEquals([0, 255, 0, 38], getPixel(imageData, 200, 225));
 145 }