Add new option "drawAxesAtZero"

When set, draw the X axis at the Y=0 position and the Y axis at the X=0
position if those positions are inside the graph's visible area.
Otherwise, draw the axes at the bottom or left graph edge as usual.

diff --git a/auto_tests/tests/axis_labels.js b/auto_tests/tests/axis_labels.js
index 02727a3..7510a52 100644 (file)
--- a/auto_tests/tests/axis_labels.js
+++ b/auto_tests/tests/axis_labels.js
@@ -84,6 +84,7 @@ AxisLabelsTestCase.prototype.testMinusOneToOne = function() {
 
 AxisLabelsTestCase.prototype.testSmallRangeNearZero = function() {
   var opts = {
+    drawAxesAtZero: true,
     width: 480,
     height: 320
   };

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 0c44e84..0dd5b79 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -383,9 +383,17 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
     }
 
     // draw a vertical line on the left to separate the chart from the labels.
+    var axisX;
+    if (this.attr_('drawAxesAtZero')) {
+      var r = this.dygraph_.toPercentXCoord(0);
+      if (r > 1 || r < 0) r = 0;
+      axisX = halfUp(this.area.x + r * this.area.w);
+    } else {
+      axisX = halfUp(this.area.x);
+    }
     context.beginPath();
-    context.moveTo(halfUp(this.area.x), halfDown(this.area.y));
-    context.lineTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h));
+    context.moveTo(axisX, halfDown(this.area.y));
+    context.lineTo(axisX, halfDown(this.area.y + this.area.h));
     context.closePath();
     context.stroke();
 
@@ -436,8 +444,16 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
     }
 
     context.beginPath();
-    context.moveTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h));
-    context.lineTo(halfUp(this.area.x + this.area.w), halfDown(this.area.y + this.area.h));
+    var axisY;
+    if (this.attr_('drawAxesAtZero')) {
+      var r = this.dygraph_.toPercentYCoord(0, 0);
+      if (r > 1 || r < 0) r = 1;
+      axisY = halfDown(this.area.y + r * this.area.h);
+    } else {
+      axisY = halfDown(this.area.y + this.area.h);
+    }
+    context.moveTo(halfUp(this.area.x), axisY);
+    context.lineTo(halfUp(this.area.x + this.area.w), axisY);
     context.closePath();
     context.stroke();
   }

diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 97b410f..69bed8a 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -489,6 +489,12 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "type": "boolean",
     "description": "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis."
   },
+  "drawAxesAtZero": {
+    "default": "false",
+    "labels": ["Axis display"],
+    "type": "boolean",
+    "description": "When set, draw the X axis at the Y=0 position and the Y axis at the X=0 position if those positions are inside the graph's visible area. Otherwise, draw the axes at the bottom or left graph edge as usual."
+  },
   "xAxisLabelFormatter": {
     "default": "",
     "labels": ["Deprecated"],

diff --git a/dygraph.js b/dygraph.js
index 06abf97..abd2973 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -233,6 +233,7 @@ Dygraph.DEFAULT_ATTRS = {
 
   stepPlot: false,
   avoidMinZero: false,
+  drawAxesAtZero: false,
 
   // Sizes of the various chart labels.
   titleHeight: 28,

diff --git a/gallery/linear-regression.js b/gallery/linear-regression.js
index f381e4c..43daecd 100644 (file)
--- a/gallery/linear-regression.js
+++ b/gallery/linear-regression.js
@@ -112,6 +112,7 @@ Gallery.register(
                 labels: ['X', 'Y1', 'Y2'],
                 underlayCallback: drawLines,
                 drawPoints: true,
+                drawAxesAtZero: true,
                 strokeWidth: 0.0
               }
           );