Per series roll period

auto_tests/tests/per_series_rolling_average.js

@@ -0,0 +1,117 @@
+/**
+ * @fileoverview Tests for per series rolling averages.
+ *
+ * @author Nick Hayday ([email protected]) 
+ */
+
+import Dygraph from '../../src/dygraph';
+
+import Util from './Util';
+
+describe("per-series-rolling-average", function() {
+
+cleanupAfterEach();
+
+it('testPerSeriesRollingAverage', function() {
+  var opts = {
+    width: 480,
+    height: 320,
+      series: {
+          Y: {
+              rollPeriod: 1 }  
+		  }
+  };
+  var data = "X,Y,Z\n" +
+      "0,0,0\n" +
+      "1,1,10\n" +
+      "2,2,20\n" +
+      "3,3,30\n"
+  ;
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 1 Z: 10", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 2 Z: 20", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 3 Z: 30", Util.getLegend());
+  assert.equal(1, g.getOption("rollPeriod", "Y"));
+  g.updateOptions({
+    series: { Y: { rollPeriod: 2 } }
+  });
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 0.5 Z: 10", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 1.5 Z: 20", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 2.5 Z: 30", Util.getLegend());
+  assert.equal(2, g.getOption("rollPeriod", "Y"));
+  g.updateOptions({
+    series: { Y: { rollPeriod: 3 },
+              Z: { rollPeriod: 2 } }
+  });
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 0.5 Z: 5", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 1 Z: 15", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 2 Z: 25", Util.getLegend());
+  assert.equal(3, g.getOption("rollPeriod", "Y"));
+  assert.equal(2, g.getOption("rollPeriod", "Z"));
+  g.updateOptions({
+    series: { Y: { rollPeriod: 1 },
+              Z: { rollPeriod: 4 } }
+  });
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 1 Z: 5", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 2 Z: 10", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 3 Z: 15", Util.getLegend());
+  assert.equal(1, g.getOption("rollPeriod", "Y"));
+  assert.equal(4, g.getOption("rollPeriod", "Z"));
+});
+
+it('testDefaultToGlobalRollingAverage', function() {
+  var opts = {
+    width: 480,
+    height: 320,
+    rollPeriod: 2,
+      series: {
+          Y: {
+              rollPeriod: 1 }  
+		  }
+  };
+  var data = "X,Y,Z\n" +
+      "0,0,0\n" +
+      "1,1,10\n" +
+      "2,2,20\n" +
+      "3,3,30\n"
+  ;
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 1 Z: 5", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 2 Z: 15", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 3 Z: 25", Util.getLegend());
+  assert.equal(1, g.getOption("rollPeriod", "Y"));
+  assert.equal(2, g.getOption("rollPeriod", "Z"));
+  assert.equal(2, g.getOption("rollPeriod"));
+  g.updateOptions({
+    series: { Y: { rollPeriod: 3 } }
+  });
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 0.5 Z: 5", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 1 Z: 15", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 2 Z: 25", Util.getLegend());
+  assert.equal(3, g.getOption("rollPeriod", "Y"));
+  assert.equal(2, g.getOption("rollPeriod", "Z"));
+  assert.equal(2, g.getOption("rollPeriod"));
+  g.updateOptions({
+     rollPeriod: 4 
+  });
+  g.setSelection(0); assert.equal("0: Y: 0 Z: 0", Util.getLegend());
+  g.setSelection(1); assert.equal("1: Y: 0.5 Z: 5", Util.getLegend());
+  g.setSelection(2); assert.equal("2: Y: 1 Z: 10", Util.getLegend());
+  g.setSelection(3); assert.equal("3: Y: 2 Z: 15", Util.getLegend());
+  assert.equal(3, g.getOption("rollPeriod", "Y"));
+  assert.equal(4, g.getOption("rollPeriod", "Z"));
+  assert.equal(4, g.getOption("rollPeriod"));
+});
+});

src/dygraph.js

@@ -2026,14 +2026,17 @@ Dygraph.prototype.predraw_ = function() {
 
   this.cascadeEvents_('predraw');
 
+
   // Convert the raw data (a 2D array) into the internal format and compute
   // rolling averages.
+  var seriesName = this.getLabels();
   this.rolledSeries_ = [null];  // x-axis is the first series and it's special
   for (var i = 1; i < this.numColumns(); i++) {
     // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too.
     var series = this.dataHandler_.extractSeries(this.rawData_, i, this.attributes_);
-    if (this.rollPeriod_ > 1) {
-      series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_);
+	var rollPeriod = this.getOption('rollPeriod', seriesName[i]);
+    if (rollPeriod > 1) {
+      series = this.dataHandler_.rollingAverage(series, rollPeriod, this.attributes_);
     }
 
     this.rolledSeries_.push(series);

tests/per-series-rolling-average.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
+    <title>Per Series Rolling Average</title>
+    <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+    <script type="text/javascript" src="data.js"></script>
+    <style type="text/css">
+    #graphdiv {
+      width:600px;
+      height: 300px;
+      left: 10px;
+      right: 10px;
+      top: 40px;
+      bottom: 10px;
+    }
+    </style>
+  </head>
+  <body>
+
+  <div id="graphdiv"> </div>
+
+  Check the boxes to apply the rolling average <br>
+
+  <input type="checkbox" href="#" id="high" name="high" />High (7 day rolling average)<br>
+  <input type="checkbox" href="#" id="low" name="low" />Low (30 day rolling average)
+
+  <script type="text/javascript">
+
+  var g = new Dygraph(document.getElementById('graphdiv'), data,
+    {
+       title: 'Per Series Rolling Average',     
+       xlabel: 'Date',
+       ylabel: 'Temperature (F)'	  
+      });
+
+  function updateRollPeriod(series, value) {
+    var seriesOpt = {};
+    seriesOpt[series] = { rollPeriod: value };
+    g.updateOptions ({ series: seriesOpt });
+  }
+
+  $("#high").change(function () {
+    if(this.checked) {
+      updateRollPeriod("High", 7);
+    } else {
+      updateRollPeriod("High", 1);
+    }
+  });
+
+  $("#low").change(function () {
+    if(this.checked) {
+      updateRollPeriod("Low", 30);
+    } else {
+      updateRollPeriod("Low", 1);
+    }
+  });	  
+  </script>
+  </body>
+</html>