add the ability to highlight multiple series with setSelection

auto_tests/tests/selection.js

@@ -50,6 +50,20 @@ it('testSetGetSelectionDense', function() {
   assert.equal(3, g.getSelection());
 });
 
+it('testSetGetSelectionMulti', function() {
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph,
+    "X,Y,Z\n" +
+    "1,1,1\n" +
+    "50,50,50\n" +
+    "50.0001,50.0001,50.0001\n" +
+    "100,100,100\n"
+  );
+
+  g.setSelection(false, ['Y','Z']);
+  assert.deepEqual(['Y','Z'], g.getHighlightSeries());
+});
+
 it('testSetGetSelectionMissingPoints', function() {
   var dataHandler = function() {};
   dataHandler.prototype = new DefaultHandler();

src/dygraph-options-reference.js

@@ -127,7 +127,7 @@ OPTIONS_REFERENCE =  // <JSON>
       ["x", "the x-coordinate of the highlighted points"],
       ["points", "an array of highlighted points: <code>[ {name: 'series', yval: y-value}, &hellip; ]</code>"],
       ["row", "integer index of the highlighted row in the data table, starting from 0"],
-      ["seriesName", "name of the highlighted series, only present if highlightSeriesOpts is set."]
+      ["seriesName", "name or names of the highlighted series, only present if highlightSeriesOpts is set."]
     ]
   },
   "drawHighlightPointCallback": {

src/dygraph.js

@@ -1743,7 +1743,13 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
 
     // Redraw only the highlighted series in the interactive canvas (not the
     // static plot canvas, which is where series are usually drawn).
-    this.plotter_._renderLineChart(this.highlightSet_, ctx);
+    if(utils.isArrayLike(this.highlightSet_)) {
+      for( var i = 0; i < this.highlightSet_.length; i++) {
+        this.plotter_._renderLineChart(this.highlightSet_[i], ctx);
+      }
+    } else {
+      this.plotter_._renderLineChart(this.highlightSet_, ctx);
+    }
   } else if (this.previousVerticalX_ >= 0) {
     // Determine the maximum highlight circle size.
     var maxCircleSize = 0;
@@ -1793,8 +1799,8 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
  *
  * @param {number} row Row number that should be highlighted (i.e. appear with
  * hover dots on the chart).
- * @param {seriesName} optional series name to highlight that series with the
- * the highlightSeriesOpts setting.
+ * @param {seriesName} optional series name(string, or array of strings) to
+ * highlight with the the highlightSeriesOpts setting.
  * @param { locked } optional If true, keep seriesName selected when mousing
  * over the graph, disabling closest-series highlighting. Call clearSelection()
  * to unlock it.
@@ -1840,7 +1846,9 @@ Dygraph.prototype.setSelection = function(row, opt_seriesName, opt_locked) {
   }
 
   if (opt_seriesName !== undefined) {
-    if (this.highlightSet_ !== opt_seriesName) changed = true;
+    var stringifiedNew = utils.isArrayLike(opt_seriesName)?opt_seriesName.join():opt_seriesName;
+    var stringifiedOld = utils.isArrayLike(this.highlightSet_)?this.highlightSet_.join():this.highlightSet_;
+    if (stringifiedOld !== stringifiedNew) changed = true;
     this.highlightSet_ = opt_seriesName;
   }