EXAMPLE: added new example for fixed bug

[dygraphs.git] / auto_tests / tests / connect_separated_points.js

/**\r
 * @fileoverview Test cases for the option "connectSeparatedPoints" especially for the scenario where not every series has a value for each timestamp.\r
 *\r
 * @author julian.eichstaedt@ch.sauter-bc.com (Fr. Sauter AG)\r
 */\r
var ConnectSeparatedPointsTestCase = TestCase("connect-separated-points");\r
\r
ConnectSeparatedPointsTestCase.prototype.setUp = function() {\r
  document.body.innerHTML = "<div id='graph'></div>";\r
};\r
\r
ConnectSeparatedPointsTestCase.origFunc = Dygraph.getContext;\r
\r
ConnectSeparatedPointsTestCase.prototype.setUp = function() {\r
  document.body.innerHTML = "<div id='graph'></div>";\r
  Dygraph.getContext = function(canvas) {\r
    return new Proxy(ConnectSeparatedPointsTestCase.origFunc(canvas));\r
  };\r
};\r
\r
ConnectSeparatedPointsTestCase.prototype.tearDown = function() {\r
  Dygraph.getContext = ConnectSeparatedPointsTestCase.origFunc;\r
};\r
\r
ConnectSeparatedPointsTestCase.prototype.testEdgePointsSimple = function() {\r
  var opts = {\r
    width: 480,\r
    height: 320,\r
    labels: ["x", "series1", "series2", "additionalSeries"],\r
    connectSeparatedPoints: true,\r
    dateWindow: [2.5,7.5]\r
  };\r
\r
  var data = [\r
              [0,-1,0,null],\r
              [1,null,2,null],\r
              [2,null,4,null],\r
              [3,0.5,0,null],\r
              [4,1,-1,5],\r
              [5,2,-2,6],\r
              [6,2.5,-2.5,7],\r
              [7,3,-3,null],\r
              [8,4,null,null],\r
              [9,4,-10,null],\r
             ];\r
\r
  var graph = document.getElementById("graph");\r
  var g = new Dygraph(graph, data, opts);\r
  \r
  htx = g.hidden_ctx_;\r
\r
  var attrs = {};  \r
\r
  // Test if series1 is drawn correctly.\r
  // ------------------------------------\r
  \r
  // The first point of the first series\r
  var x1 = data[0][0];\r
  var y1 = data[0][1];\r
  var xy1 = g.toDomCoords(x1, y1);\r
  \r
  // The next valid point of this series\r
  var x2 = data[3][0];\r
  var y2 = data[3][1];\r
  var xy2 = g.toDomCoords(x2, y2);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
\r
  // Test if series2 is drawn correctly.\r
  // ------------------------------------\r
\r
  // The last point of the second series.\r
  var x2 = data[9][0];\r
  var y2 = data[9][2];\r
  var xy2 = g.toDomCoords(x2, y2);\r
\r
  // The previous valid point of this series\r
  var x1 = data[7][0];\r
  var y1 = data[7][2];\r
  var xy1 = g.toDomCoords(x1, y1);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
};\r
\r
ConnectSeparatedPointsTestCase.prototype.testEdgePointsCustomBars = function() {\r
  var opts = {\r
    width: 480,\r
    height: 320,\r
    labels: ["x", "series1", "series2", "additionalSeries"],\r
    connectSeparatedPoints: true,\r
    dateWindow: [2.5,7.5],\r
    customBars: true\r
  };\r
  \r
  var data = [\r
              [0,[4,5,6], [1,2,3], [null, null, null]],\r
              [1,[null,null,null], [2,3,4], [null, null, null]],\r
              [2,[null,null,null], [3,4,5], [null, null, null]],\r
              [3,[0,1,2], [2,3,4], [null, null, null]],    \r
              [4,[1,2,3], [2,3,4], [4, 5, 6]],\r
              [5,[1,2,3], [3,4,5], [4, 5, 6]],\r
              [6,[0,1,2], [4,5,6], [5, 6, 7]],\r
              [7,[0,1,2], [4,5,6], [null, null, null]],\r
              [8,[2,3,4], [null,null,null], [null, null, null]],\r
              [9,[0,1,2], [2,4,9], [null, null, null]]\r
              \r
             ];\r
\r
  var graph = document.getElementById("graph");\r
  var g = new Dygraph(graph, data, opts);\r
  \r
  htx = g.hidden_ctx_;\r
\r
  var attrs = {};  \r
\r
  \r
  // Test if values of the series1 are drawn correctly.\r
  // ------------------------------------\r
  \r
  // The first point of the first series\r
  var x1 = data[0][0];\r
  var y1 = data[0][1][1];\r
  var xy1 = g.toDomCoords(x1, y1);\r
  \r
  // The next valid point of this series\r
  var x2 = data[3][0];\r
  var y2 = data[3][1][1];\r
  var xy2 = g.toDomCoords(x2, y2);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if the custom bars of the series1 are drawn correctly\r
  // --------------------------------------------\r
  \r
  // The first min-point of this series\r
  x1 = data[0][0];\r
  y1 = data[0][1][0];\r
  xy1 = g.toDomCoords(x1, y1);\r
\r
  // The next valid min-point of the second series.\r
  x2 = data[3][0];\r
  y2 = data[3][1][0];\r
  xy2 = g.toDomCoords(x2, y2);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // The first max-point of this series\r
  x1 = data[0][0];\r
  y1 = data[0][1][2];\r
  xy1 = g.toDomCoords(x1, y1);\r
  \r
  // The next valid max-point of the second series.\r
  x2 = data[3][0];\r
  y2 = data[3][1][2];\r
  xy2 = g.toDomCoords(x2, y2);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if values of the series2 are drawn correctly.\r
  // ------------------------------------\r
  \r
  // The last point of the second series.\r
  var x2 = data[9][0];\r
  var y2 = data[9][2][1];\r
  var xy2 = g.toDomCoords(x2, y2);\r
  \r
  // The previous valid point of this series\r
  var x1 = data[7][0];\r
  var y1 = data[7][2][1];\r
  var xy1 = g.toDomCoords(x1, y1);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if the custom bars of the series2 are drawn correctly\r
  // --------------------------------------------\r
  \r
  // The last min-point of the second series.\r
  x2 = data[9][0];\r
  y2 = data[9][2][0];\r
  xy2 = g.toDomCoords(x2, y2);\r
  \r
  // The previous valid min-point of this series\r
  x1 = data[7][0];\r
  y1 = data[7][2][0];\r
  xy1 = g.toDomCoords(x1, y1);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // The last max-point of the second series.\r
  x2 = data[9][0];\r
  y2 = data[9][2][2];\r
  xy2 = g.toDomCoords(x2, y2);\r
  \r
  // The previous valid max-point of this series\r
  x1 = data[7][0];\r
  y1 = data[7][2][2];\r
  xy1 = g.toDomCoords(x1, y1);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
};\r
\r
ConnectSeparatedPointsTestCase.prototype.testEdgePointsErrorBars = function() {\r
  var opts = {\r
    width: 480,\r
    height: 320,\r
    labels: ["x", "series1", "series2", "seriesTestHelper"],\r
    connectSeparatedPoints: true,\r
    dateWindow: [2,7.5],\r
    errorBars: true\r
    \r
  };\r
  \r
  var data = [\r
              [0,[5,1], [2,1], [null,null]],\r
              [1,[null,null], [3,1], [null,null]],\r
              [2,[null,null], [4,1], [null,null]],\r
              [3,[1,1], [3,1], [null,null]],    \r
              [4,[2,1], [3,1], [5,1]],\r
              [5,[2,1], [4,1], [5,1]],\r
              [6,[1,1], [5,1], [6,1]],\r
              [7,[1,1], [5,1], [null,null]],\r
              [8,[3,1], [null,null], [null,null]],\r
              [9,[1,1], [4,1], [null,null]]\r
              \r
             ];\r
\r
  var graph = document.getElementById("graph");\r
  var g = new Dygraph(graph, data, opts);\r
  \r
  htx = g.hidden_ctx_;\r
\r
  var attrs = {};  \r
\r
  \r
  // Test if values of the series1 are drawn correctly.\r
  // ------------------------------------\r
  \r
  // The first point of the first series\r
  var x1 = data[0][0];\r
  var y1 = data[0][1][0];\r
  var xy1 = g.toDomCoords(x1, y1);\r
  \r
  // The next valid point of this series\r
  var x2 = data[3][0];\r
  var y2 = data[3][1][0];\r
  var xy2 = g.toDomCoords(x2, y2);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if the upper error bars of series1 are drawn correctly\r
  // --------------------------------------------\r
  \r
  // The first upper error-point of this series\r
  x1 = data[0][0];\r
  var y1error = y1 + (data[0][1][1]*2);\r
  xy1 = g.toDomCoords(x1, y1error);\r
  \r
  // The next valid upper error-point of the second series.\r
  x2 = data[3][0];\r
  var y2error = y2 + (data[3][1][1]*2);\r
  xy2 = g.toDomCoords(x2, y2error);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if the lower error bars of series1 are drawn correctly\r
  // --------------------------------------------\r
  \r
  // The first lower error-point of this series\r
  x1 = data[0][0];\r
  y1error = y1 - (data[0][1][1]*2);\r
  xy1 = g.toDomCoords(x1, y1error);\r
  \r
  //The next valid lower error-point of the second series.\r
  x2 = data[3][0];\r
  y2error = y2 - (data[3][1][1]*2);\r
  xy2 = g.toDomCoords(x2, y2error);\r
  \r
  // Check if both points are connected at the left edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  \r
  // Test if values of the series2 are drawn correctly.\r
  // ------------------------------------\r
  \r
  // The last point of this series\r
  x2 = data[9][0];\r
  y2 = data[9][2][0];\r
  xy2 = g.toDomCoords(x2, y2);\r
  \r
  // The previous valid point of the first series\r
  x1 = data[7][0];\r
  y1 = data[7][2][0];\r
  xy1 = g.toDomCoords(x1, y1);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if the upper error bars of series2 are drawn correctly\r
  // --------------------------------------------\r
  \r
  // The last upper error-point of the second series.\r
  x2 = data[9][0];\r
  var y2error = y2 + (data[9][2][1]*2);\r
  xy2 = g.toDomCoords(x2, y2error);\r
  \r
  // The previous valid upper error-point of this series\r
  x1 = data[7][0];\r
  var y1error = y1 + (data[7][2][1]*2);\r
  xy1 = g.toDomCoords(x1, y1error);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
  \r
  // Test if the lower error bars of series1 are drawn correctly\r
  // --------------------------------------------\r
  \r
  // The last lower error-point of the second series.\r
  x2 = data[9][0];\r
  y2error = y2 - (data[9][2][1]*2);\r
  xy2 = g.toDomCoords(x2, y2error);\r
  \r
  // The previous valid lower error-point of this series\r
  x1 = data[7][0];\r
  y1error = y1 - (data[7][2][1]*2);\r
  xy1 = g.toDomCoords(x1, y1error);\r
  \r
  // Check if both points are connected at the right edge of the canvas and if the option "connectSeparatedPoints" works properly\r
  // even if the point is outside the visible range and only one series has a valid value for this point.\r
  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);\r
};\r