Now considering the issue as a bug, adding an auto_test (might be wrong)

diff --git a/auto_tests/misc/local.html b/auto_tests/misc/local.html
index f356fc5..455b6cb 100644 (file)
--- a/auto_tests/misc/local.html
+++ b/auto_tests/misc/local.html
@@ -30,6 +30,7 @@
   <script type="text/javascript" src="../tests/date_formats.js"></script>
   <script type="text/javascript" src="../tests/dygraph-options-tests.js"></script>
   <script type="text/javascript" src="../tests/error_bars.js"></script>
+  <script type="text/javascript" src="../tests/fill_step_plot.js"></script>
   <script type="text/javascript" src="../tests/formats.js"></script>
   <script type="text/javascript" src="../tests/grid_per_axis.js"></script>
   <script type="text/javascript" src="../tests/interaction_model.js"></script>

diff --git a/auto_tests/tests/fill_step_plot.js b/auto_tests/tests/fill_step_plot.js
new file mode 100644 (file)
index 0000000..fb66ad0
--- /dev/null
+++ b/auto_tests/tests/fill_step_plot.js
@@ -0,0 +1,59 @@
+/**
+ * @fileoverview Test if you put give null values to dygraph with stepPlot
+ * and fillGraph options enabled
+ *
+ * @author benoitboivin.pro@gmail.com (Benoit Boivin)
+ */
+var fillStepPlotTestCase = TestCase("fill-step-plot");
+
+fillStepPlotTestCase.prototype.setUp = function() {
+  document.body.innerHTML = "<div id='graph'></div>";
+};
+
+fillStepPlotTestCase.origFunc = Dygraph.getContext;
+
+fillStepPlotTestCase.prototype.setUp = function() {
+  document.body.innerHTML = "<div id='graph'></div>";
+  Dygraph.getContext = function(canvas) {
+    return new Proxy(fillStepPlotTestCase.origFunc(canvas));
+  };
+};
+
+fillStepPlotTestCase.prototype.tearDown = function() {
+  Dygraph.getContext = fillStepPlotTestCase.origFunc;
+};
+
+
+fillStepPlotTestCase.prototype.testFillStepPlotNullValues = function() {
+  var attrs = {};
+  var opts = {
+    labels: ["x","y"],
+    width: 480,
+    height: 320,
+    fillGraph: true,
+    stepPlot: true
+  };
+  var data = [
+    [1,3],
+    [2,0],
+    [3,8],
+    [4,null],
+    [5,9],
+    [6,8],
+    [7,6],
+    [8,3]
+  ];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  htx = g.hidden_ctx_;
+  var x1 = data[3][0];
+  var y1 = data[2][1];
+  var x2 = data[3][0];
+  var y2 = 0;
+  var xy1 = g.toDomCoords(x1, y1);
+  var xy2 = g.toDomCoords(x2, y2);
+  
+  // Check if a line is drawn between the previous y and the bottom of the chart
+  CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
+};
\ No newline at end of file

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index b7a49a5..5bfbfbf 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -691,7 +691,6 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
     if (!g.getBooleanOption('fillGraph', setName)) continue;
     
     var stepPlot = g.getBooleanOption('stepPlot', setName);
-    var fillStepPlot = stepPlot && g.getBooleanOption("fillStepPlot", setName);
     var color = colors[setIdx];
     var axis = g.axisPropertiesForSeries(setName);
     var axisY = 1.0 + axis.minyval * axis.yscale;
@@ -717,7 +716,7 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
     var last_x, is_first = true;
     while (iter.hasNext) {
       var point = iter.next();
-      if (!Dygraph.isOK(point.y) && !fillStepPlot) {
+      if (!Dygraph.isOK(point.y) && !stepPlot) {
         prevX = NaN;
         if (point.y_stacked !== null && !isNaN(point.y_stacked)) {
           baseline[point.canvasx] = area.h * point.y_stacked + area.y;
@@ -758,12 +757,9 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
         }
 
       } else {
-        if (isNaN(point.canvasy) && fillStepPlot)
-        {
+        if (isNaN(point.canvasy) && stepPlot) {
           newYs = [ area.y + area.h, axisY ];
-        }
-        else
-        {
+        } else {
           newYs = [ point.canvasy, axisY ];
         }
       }

diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index bc0b2f4..3030bc7 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -413,12 +413,6 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "type": "boolean",
     "description": "Should the area underneath the graph be filled? This option is not compatible with error bars. This may be set on a <a href='per-axis.html'>per-series</a> basis."
   },
-  "fillStepPlot": {
-    "default": "false",
-    "labels": ["Data Line display"],
-    "type": "boolean",
-    "description": "If true, allows the graph to be filled the right way including gaps (only if stepPlot and fillGraph are set true) and ignored if stepPlot is set to false"
-  },
   "highlightCircleSize": {
     "default": "3",
     "labels": ["Interactive Elements"],

diff --git a/dygraph.js b/dygraph.js
index 8a0ee08..9570d3c 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -280,7 +280,6 @@ Dygraph.DEFAULT_ATTRS = {
   customBars: false,
   fillGraph: false,
   fillAlpha: 0.15,
-  fillStepPlot: false,
   connectSeparatedPoints: false,
 
   stackedGraph: false,

diff --git a/tests/fillStepPlot.html b/tests/fillStepPlot.html
deleted file mode 100644 (file)
index 7cc310b..0000000
--- a/tests/fillStepPlot.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
-    <title>dygraph</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="../excanvas.js"></script>
-    <![endif]-->
-    <!--
-    For production (minified) code, use:
-    <script type="text/javascript" src="dygraph-combined.js"></script>
-    -->
-    <script type="text/javascript" src="../dygraph-dev.js"></script>
-
-  </head>
-  <body>
-    <p>1: Showing the fill problem near the gap due to the null value:</p>
-    <div id="graph1"></div>
-    <script type="text/javascript">
-        var g1 = new Dygraph(document.getElementById("graph1"),
-        [
-          [1,3],
-          [2,0],
-          [3,8],
-          [4,null],
-          [5,9],
-          [6,8],
-          [7,6],
-          [8,3]
-        ],
-        {
-          labels: ["x1","y1"],
-          fillGraph: true,
-          stepPlot: true
-        });
-    </script>
-
-    <p>2: Showing the proper fill with the fillStepPlot option:</p>
-    <div id="graph2"></div>
-    <script type="text/javascript">
-        var g2 = new Dygraph(document.getElementById("graph2"),
-        [
-          [1,3],
-          [2,0],
-          [3,8],
-          [4,null],
-          [5,9],
-          [6,8],
-          [7,6],
-          [8,3]
-        ],
-        {
-          labels: ["x2","y2"],
-          fillGraph: true,
-          stepPlot: true,
-          fillStepPlot: true
-        });
-    </script>
-
-  </body>
-</html>