BUGFIX: stepPlot per series now also works correctly for the

stackedGraph and fillGraph options

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 5305ded..fa0dd80 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -692,18 +692,19 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
   var setCount = sets.length;
 
   var fillAlpha = g.getOption('fillAlpha');
-  var stepPlot = g.getOption('stepPlot', e.setName);
   var stackedGraph = g.getOption("stackedGraph");
   var colors = g.getColors();
 
   var baseline = {};  // for stacked graphs: baseline for filling
   var currBaseline;
+  var prevStepPlot;  // for different line drawing modes (line/step) per series
 
   // process sets in reverse order (needed for stacked graphs)
   for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) {
     var setName = setNames[setIdx];
     if (!g.getOption('fillGraph', setName)) continue;
-
+    
+    var stepPlot = g.getOption('stepPlot', setName);
     var color = colors[setIdx];
     var axis = g.axisPropertiesForSeries(setName);
     var axisY = 1.0 + axis.minyval * axis.yscale;
@@ -738,7 +739,7 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
         if (currBaseline === undefined) {
           lastY = axisY;
         } else {
-          if(stepPlot) {
+          if(prevStepPlot) {
             lastY = currBaseline[0];
           } else {
             lastY = currBaseline;
@@ -763,17 +764,18 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
       }
       if (!isNaN(prevX)) {
         ctx.moveTo(prevX, prevYs[0]);
-
+        
+        // Move to top fill point
         if (stepPlot) {
           ctx.lineTo(point.canvasx, prevYs[0]);
-          if(currBaseline) {
-            // Draw to the bottom of the baseline
-            ctx.lineTo(point.canvasx, currBaseline[1]);
-          } else {
-            ctx.lineTo(point.canvasx, newYs[1]);
-          }
         } else {
           ctx.lineTo(point.canvasx, newYs[0]);
+        }
+        // Move to bottom fill point
+        if (prevStepPlot && currBaseline) {
+          // Draw to the bottom of the baseline
+          ctx.lineTo(point.canvasx, currBaseline[1]);
+        } else {
           ctx.lineTo(point.canvasx, newYs[1]);
         }
 
@@ -783,6 +785,7 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
       prevYs = newYs;
       prevX = point.canvasx;
     }
+    prevStepPlot = stepPlot;
     ctx.fill();
   }
 };

diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 0f601d1..de17dec 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -469,7 +469,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "default": "false",
     "labels": ["Data Line display"],
     "type": "boolean",
-    "description": "When set, display the graph as a step plot instead of a line plot."
+    "description": "When set, display the graph as a step plot instead of a line plot. This option may either be set for the whole graph or for single series."
   },
   "labelsKMB": {
     "default": "false",

diff --git a/tests/steps.html b/tests/steps.html
index 42b7362..8c58811 100644 (file)
--- a/tests/steps.html
+++ b/tests/steps.html
@@ -153,6 +153,118 @@
                           includeZero: true
                        });
     </script>
+       
+       <p>9: Mixed mode - step and line:</p>
+    <div id="graphdiv9"></div>
+    <script type="text/javascript">
+      g8 = new Dygraph(document.getElementById("graphdiv9"),
+                      "Date,Idle,Used\n" +
+                      "2008-05-07,70,30\n" +
+                      "2008-05-08,12,88\n" +
+                      "2008-05-09,88,12\n" +
+                      "2008-05-10,63,37\n" +
+                      "2008-05-11,35,65\n",
+                      {
+                               series: {
+                                                 Idle: {stepPlot: true},
+                                                 Used: {stepPlot: false}
+                                               },
+                                                 
+                        fillGraph: false,
+                        stackedGraph: false,
+                        includeZero: true
+                      });
+    </script>
+       
+       
+       <p>10: Mixed mode - step and line (filled):</p>
+    <div id="graphdiv10"></div>
+    <script type="text/javascript">
+      g8 = new Dygraph(document.getElementById("graphdiv10"),
+                      "Date,Idle,Used\n" +
+                      "2008-05-07,70,30\n" +
+                      "2008-05-08,12,88\n" +
+                      "2008-05-09,88,12\n" +
+                      "2008-05-10,63,37\n" +
+                      "2008-05-11,35,65\n",
+                      {
+                               series: {
+                                                 Idle: {stepPlot: false},
+                                                 Used: {stepPlot: true}
+                                               },
+                                                 
+                        fillGraph: true,
+                        stackedGraph: false,
+                        includeZero: true
+                      });
+    </script>
+
+       <p>11: Mixed mode - step and line (stacked and filled):</p>
+    <div id="graphdiv11"></div>
+    <script type="text/javascript">
+      g8 = new Dygraph(document.getElementById("graphdiv11"),
+                      "Date,Idle,Used,NotUsed,Active\n" +
+                      "2008-05-07,60,30,5,5\n" +
+                      "2008-05-08,12,73,5,10\n" +
+                      "2008-05-09,38,12,30,20\n" +
+                      "2008-05-10,50,17,23,10\n" +
+                      "2008-05-11,35,25,35,5\n",
+                      {
+                               series: {
+                                                 Idle: {stepPlot: false},
+                                                 Used: {stepPlot: true},
+                                                 NotUsed: {stepPlot: false},
+                                                 Active: {stepPlot: true}                                                   
+                        },
+                        fillGraph: true,
+                        stackedGraph: true,
+                        includeZero: true
+                      });
+    </script>
+       
+       <p>12: Mixed mode - step and line (errorbars):</p>
+    <div id="graphdiv12"></div>
+    <script type="text/javascript">
+      g8 = new Dygraph(document.getElementById("graphdiv12"),
+        [
+          [1, [75, 2], [50, 3]],
+          [2, [70, 5], [90, 4]],
+          [3, [80, 7], [112, 5]],
+          [4, [55, 3], [100, 2]],
+          [5, [69, 4], [85, 6]]
+        ],     
+        {                 
+          errorBars: true,
+          labels: ["X", "Data1", "Data2"],
+                 series: {
+                   Data1: {stepPlot: true},    
+                   Data2: {stepPlot: false} 
+                 }
+        }
+         );
+    </script>
+       
+       <p>13: Mixed mode - step and line (custombars):</p>
+    <div id="graphdiv13"></div>
+    <script type="text/javascript">
+      g8 = new Dygraph(document.getElementById("graphdiv13"),
+        [
+          [1, [73, 75, 78], [50, 55, 70]],
+          [2, [65, 70, 75], [83, 91, 99]],
+          [3, [75, 85, 90], [98, 107, 117]],
+          [4, [55, 58, 61], [93, 102, 105]],
+          [5, [69, 73, 85], [80, 85, 87]]
+        ],     
+        {
+          customBars: true,
+          labels: ["X", "Data1", "Data2"],
+                 series: {
+                   Data1: {stepPlot: true},    
+                   Data2: {stepPlot: false} 
+                 }
+        }
+         );
+    </script>
 
   </body>
 </html>