Make connectSeparatedPoints a per-series option. Add automated test and visual test.

diff --git a/auto_tests/tests/connect_separated_points.js b/auto_tests/tests/connect_separated_points.js
index 4bfe09c..f668ebc 100644 (file)
--- a/auto_tests/tests/connect_separated_points.js
+++ b/auto_tests/tests/connect_separated_points.js
@@ -351,3 +351,58 @@ ConnectSeparatedPointsTestCase.prototype.testEdgePointsErrorBars = function() {
   // even if the point is outside the visible range and only one series has a valid value for this point.
   CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
 };
+
+ConnectSeparatedPointsTestCase.prototype.testConnectSeparatedPointsPerSeries = function() {
+  var assertExpectedLinesDrawnPerSeries = function(htx, expectedSeries1, expectedSeries2, expectedSeries3) {
+    var expected = [expectedSeries1, expectedSeries2, expectedSeries3];    
+    var actual = [ 
+        CanvasAssertions.numLinesDrawn(htx, "#ff0000"),
+        CanvasAssertions.numLinesDrawn(htx, "#00ff00"),
+        CanvasAssertions.numLinesDrawn(htx, "#0000ff")];
+    assertEquals(expected, actual);
+  }
+
+  var g = new Dygraph(document.getElementById("graph"),
+  [
+    [1, 10, 10, 10],
+    [2, 15, 11, 12],
+    [3, null, null, 12],
+    [4, 20, 14, null],
+    [5, 15, null, 17],
+    [6, 18, null, null],
+    [7, 12, 14, null]
+  ],
+  {
+    labels: ["Date","Series1","Series2","Series3"],
+    connectSeparatedPoints: false,
+    colors: ["#ff0000", "#00ff00", "#0000ff"]
+  });
+
+  htx = g.hidden_ctx_;
+  assertExpectedLinesDrawnPerSeries(htx, 4, 1, 2);
+
+  Proxy.reset(htx);
+  g.updateOptions({
+    connectSeparatedPoints : true,
+  });
+  assertExpectedLinesDrawnPerSeries(htx, 5, 3, 3);
+
+  Proxy.reset(htx);
+  g.updateOptions({
+    connectSeparatedPoints : false,
+    series : {
+      Series1 : { connectSeparatedPoints : true }
+    }
+  });
+  assertExpectedLinesDrawnPerSeries(htx, 5, 1, 2);
+
+
+  Proxy.reset(htx);
+  g.updateOptions({
+    connectSeparatedPoints : true,
+    series : {
+      Series1 : { connectSeparatedPoints : false }
+    }
+  });
+  assertExpectedLinesDrawnPerSeries(htx, 4, 3, 3);
+}

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index cba4f44..bf779ba 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -271,9 +271,10 @@ DygraphCanvasRenderer._drawStyledLine = function(e,
   var drawGapPoints = g.getOption('drawGapEdgePoints', e.setName);
 
   var points = e.points;
+  var setName = e.setName;
   var iter = Dygraph.createIterator(points, 0, points.length,
       DygraphCanvasRenderer._getIteratorPredicate(
-          g.getOption("connectSeparatedPoints")));  // TODO(danvk): per-series?
+          g.getOption("connectSeparatedPoints", setName)));
 
   var stroking = strokePattern && (strokePattern.length >= 2);
 
@@ -601,7 +602,7 @@ DygraphCanvasRenderer._errorPlotter = function(e) {
 
   var iter = Dygraph.createIterator(points, 0, points.length,
       DygraphCanvasRenderer._getIteratorPredicate(
-          g.getOption("connectSeparatedPoints")));
+          g.getOption("connectSeparatedPoints", setName)));
 
   var newYs;
 
@@ -729,7 +730,7 @@ DygraphCanvasRenderer._fillPlotter = function(e) {
     var points = sets[setIdx];
     var iter = Dygraph.createIterator(points, 0, points.length,
         DygraphCanvasRenderer._getIteratorPredicate(
-            g.getOption("connectSeparatedPoints")));
+            g.getOption("connectSeparatedPoints", setName)));
 
     // setup graphics context
     var prevX = NaN;

diff --git a/dygraph-layout.js b/dygraph-layout.js
index 93e0c3a..2552f7f 100644 (file)
--- a/dygraph-layout.js
+++ b/dygraph-layout.js
@@ -53,10 +53,6 @@ var DygraphLayout = function(dygraph) {
   this.yTicks_ = null;
 };
 
-DygraphLayout.prototype.attr_ = function(name) {
-  return this.dygraph_.attr_(name);
-};
-
 /**
  * Add points for a single series.
  *
@@ -88,7 +84,7 @@ DygraphLayout.prototype.computePlotArea = function() {
     y: 0
   };
 
-  area.w = this.dygraph_.width_ - area.x - this.attr_('rightGap');
+  area.w = this.dygraph_.width_ - area.x - this.dygraph_.attr_('rightGap');
   area.h = this.dygraph_.height_;
 
   // Let plugins reserve space.
@@ -149,7 +145,7 @@ DygraphLayout.prototype.setAnnotations = function(ann) {
   // The Dygraph object's annotations aren't parsed. We parse them here and
   // save a copy. If there is no parser, then the user must be using raw format.
   this.annotations = [];
-  var parse = this.attr_('xValueParser') || function(x) { return x; };
+  var parse = this.dygraph_.attr_('xValueParser') || function(x) { return x; };
   for (var i = 0; i < ann.length; i++) {
     var a = {};
     if (!ann[i].xval && ann[i].x === undefined) {
@@ -220,12 +216,12 @@ DygraphLayout._calcYNormal = function(axis, value, logscale) {
 };
 
 DygraphLayout.prototype._evaluateLineCharts = function() {
-  var connectSeparated = this.attr_('connectSeparatedPoints');
-  var isStacked = this.attr_("stackedGraph");
+  var isStacked = this.dygraph_.attr_("stackedGraph");
 
   for (var setIdx = 0; setIdx < this.points.length; setIdx++) {
     var points = this.points[setIdx];
     var setName = this.setNames[setIdx];
+    var connectSeparated = this.dygraph_.attr_('connectSeparatedPoints', setName);
     var axis = this.dygraph_.axisPropertiesForSeries(setName);
     // TODO (konigsberg): use optionsForAxis instead.
     var logscale = this.dygraph_.attributes_.getForSeries("logscale", setName);

diff --git a/tests/connect-separated.html b/tests/connect-separated.html
index 96dd9a5..a5e708f 100644 (file)
--- a/tests/connect-separated.html
+++ b/tests/connect-separated.html
@@ -19,6 +19,13 @@
       overlays in the proper color.</p>
 
     <div id="graphdiv" style="width:600px; height:300px;"></div>
+<p><b>Toggle ConnectSeparated:<b></p>
+<p>
+  All: <button id="All" onclick="change(this)">true</button>
+  Series 1 <button id="Series1" onclick="change(this)">disabled</button>
+  Series 2 <button id="Series2" onclick="change(this)">disabled</button>
+  Series 3 <button id="Series3" onclick="change(this)">disabled</button>
+</p>
     <script type="text/javascript">
       var g = new Dygraph(document.getElementById("graphdiv"),
       [
@@ -34,6 +41,27 @@
         connectSeparatedPoints: true,
         labels: ["Date","Series1","Series2","Series3"]
       });
+
+      function change(el) {
+        var textSequences = [ "disabled", "true", "false" ];
+        var values = [ null, true, false ];
+        for (var idx = 0; idx < textSequences.length; idx++) {
+          if (textSequences[idx] == el.textContent) {
+            var nextIdx = (idx + 1) % 3;
+            var nextVal = values[nextIdx];
+            el.textContent = textSequences[nextIdx];
+
+           if (el.id == "All") {
+              g.updateOptions({ connectSeparatedPoints : nextVal });
+            } else {
+              var seriesOpt = {};
+              seriesOpt[el.id] = { connectSeparatedPoints : nextVal };
+              g.updateOptions({ series : seriesOpt });
+            }
+            break;
+          }
+        }
+      }
     </script>
   </body>
 </html>