Add `rangeSelectorCombinedSeries` option

diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js
index 9f83188..1f4dfe8 100644 (file)
--- a/auto_tests/tests/range_selector.js
+++ b/auto_tests/tests/range_selector.js
@@ -451,6 +451,36 @@ RangeSelectorTestCase.prototype.testCombinedSeries = function() {
   }, combinedSeries);
 };
 
+// Tests selection of a specific series to average for the mini plot.
+RangeSelectorTestCase.prototype.testSelectedCombinedSeries = function() {
+  var opts = {
+    showRangeSelector: true,
+    rangeSelectorCombinedSeries: [1, 3], // first and third series averaged, second skipped
+    labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4']
+  };
+  var data = [
+      [0, 5, 8, 13, 21],  // average (first and third) = 9
+      [5, 1, 3, 7, 14],   // average (first and third) = 4
+      [10, 0, 19, 10, 6]  // average (first and third) = 5
+    ];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  assertNotNull(rangeSelector);
+
+  var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
+  assertEquals({
+    yMin: 4 - 5 * 0.25,  // 25% padding on combined series range.
+    yMax: 9 + 5 * 0.25,
+    data: [
+      [0, 9],
+      [5, 4],
+      [10, 5]
+    ]
+  }, combinedSeries);
+};
+
 // Tests data computation for the mini plot with a single error bar series.
 RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() {
   var opts = {

diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 3030bc7..d31a794 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -793,6 +793,12 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "type": "string",
     "description": "The range selector mini plot fill color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off fill."
   },
+  "rangeSelectorCombinedSeries": {
+    "default": "null",
+    "labels": ["Interactive Elements"],
+    "type": "array<integer>",
+    "description": "Array of series indexes (1 being the first serie) to combine for drawing the mini plot. The mini plot curve will be an average of these series. If \"null\", all series are combined."
+  },
   "animatedZooms": {
     "default": "false",
     "labels": ["Interactive Elements"],

diff --git a/dygraph.js b/dygraph.js
index 038bf8b..bbfb3d8 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -320,6 +320,7 @@ Dygraph.DEFAULT_ATTRS = {
   rangeSelectorHeight: 40,
   rangeSelectorPlotStrokeColor: "#808FAB",
   rangeSelectorPlotFillColor: "#A7B1C4",
+  rangeSelectorCombinedSeries: null,
 
   // The ordering here ensures that central lines always appear above any
   // fill bars/error bars.

diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index fe32b1a..e7e9362 100644 (file)
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -647,15 +647,29 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() {
   var g = this.dygraph_;
   var logscale = this.getOption_('logscale');
 
-  // Create a combined series (average of all series values).
+  // Create a combined series (average of selected series values).
   var i;
 
+  // Select series to combine
+  var selectedSeries = this.getOption_('rangeSelectorCombinedSeries');
+
+  // Default: select all series
+  if (selectedSeries === null) {
+    var numColumns = g.numColumns();
+    selectedSeries = new Array(numColumns - 1);
+
+    for (i = 1; i < numColumns; i++) {
+      selectedSeries[i - 1] = i;
+    }
+  }
+
   // TODO(danvk): short-circuit if there's only one series.
   var rolledSeries = [];
   var dataHandler = g.dataHandler_;
   var options = g.attributes_;
-  for (i = 1; i < g.numColumns(); i++) {
-    var series = dataHandler.extractSeries(g.rawData_, i, options);
+  for (i = 0; i < selectedSeries.length; i++) {
+    var seriesIndex = selectedSeries[i];
+    var series = dataHandler.extractSeries(g.rawData_, seriesIndex, options);
     if (g.rollPeriod() > 1) {
       series = dataHandler.rollingAverage(series, g.rollPeriod(), options);
     }

diff --git a/tests/range-selector.html b/tests/range-selector.html
index 2cb9615..c5c973b 100644 (file)
--- a/tests/range-selector.html
+++ b/tests/range-selector.html
@@ -30,6 +30,11 @@
     </p>
     <div id="roll14" style="width:800px; height:320px;"></div>
     <p>
+      Use the average of a specific subset of series to draw the mini plot (only the first serie is used in this test).
+      The default behaviour is to compute the average of <em>all</em> series.
+    </p>
+    <div id="selectcombined" style="width:800px; height:320px;"></div>
+    <p>
       Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
     </p>
     <div id="nochart" style="width:800px; height:30px;"></div>
@@ -65,6 +70,21 @@
           }
       );
       g3 = new Dygraph(
+          document.getElementById("selectcombined"),
+          [
+            [0, 1, 4, 10],
+            [10, 2, 8, 19],
+            [25, 15, 4, 2],
+            [35, 0, 3, 2]
+          ],
+          {
+            title: 'Daily Temperatures in New York vs. San Francisco',
+            ylabel: 'Temperature (F)',
+            showRangeSelector: true,
+            rangeSelectorCombinedSeries: [1]
+          }
+      );
+      g4 = new Dygraph(
           document.getElementById("nochart"),
           [[0,1],[10,1]],
           {