FEATURE: Added support for per-axis grid options and added new option:

"gridLinePattern"

diff --git a/dygraph.js b/dygraph.js
index 0dcc23a..52b7700 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -344,18 +344,24 @@ Dygraph.DEFAULT_ATTRS = {
       pixelsPerLabel: 60,
       axisLabelFormatter: Dygraph.dateAxisFormatter,
       valueFormatter: Dygraph.dateString_,
+      drawGrid: true,
+      independentTicks: true,
       ticker: null  // will be set in dygraph-tickers.js
     },
     y: {
       pixelsPerLabel: 30,
       valueFormatter: Dygraph.numberValueFormatter,
       axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
+      drawGrid: true,
+      independentTicks: true,
       ticker: null  // will be set in dygraph-tickers.js
     },
     y2: {
       pixelsPerLabel: 30,
       valueFormatter: Dygraph.numberValueFormatter,
       axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
+      drawGrid: false,
+      independentTicks: false,
       ticker: null  // will be set in dygraph-tickers.js
     }
   }
@@ -2588,12 +2594,15 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
   };
   var numAxes = this.attributes_.numAxes();
   var ypadCompat, span, series, ypad;
+  
+  var p_axis;
 
   // Compute extreme values, a span and tick marks for each axis.
   for (var i = 0; i < numAxes; i++) {
     var axis = this.axes_[i];
     var logscale = this.attributes_.getForAxis("logscale", i);
     var includeZero = this.attributes_.getForAxis("includeZero", i);
+    var independentTicks = this.attributes_.getForAxis("independentTicks", i);
     series = this.attributes_.seriesForAxis(i);
 
     // Add some padding. This supports two Y padding operation modes:
@@ -2711,20 +2720,32 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
     } else {
       axis.computedValueRange = axis.extremeRange;
     }
-
-    // Add ticks. By default, all axes inherit the tick positions of the
-    // primary axis. However, if an axis is specifically marked as having
-    // independent ticks, then that is permissible as well.
-    var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
-    var ticker = opts('ticker');
-    if (i === 0 || axis.independentTicks) {
+    
+    
+    if(independentTicks){
+      axis.independentTicks = independentTicks;
+      var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
+      var ticker = opts('ticker');
       axis.ticks = ticker(axis.computedValueRange[0],
-                          axis.computedValueRange[1],
-                          this.height_,  // TODO(danvk): should be area.height
-                          opts,
-                          this);
-    } else {
-      var p_axis = this.axes_[0];
+              axis.computedValueRange[1],
+              this.height_,  // TODO(danvk): should be area.height
+              opts,
+              this);
+      // Define the first indepentant axis as primary axis.
+      if(!p_axis)
+        p_axis = axis;
+    }
+  }
+  
+  // Add ticks. By default, all axes inherit the tick positions of the
+  // primary axis. However, if an axis is specifically marked as having
+  // independent ticks, then that is permissible as well.
+  for (var i = 0; i < numAxes; i++) {
+    var axis = this.axes_[i];
+    
+    if (!axis.independentTicks) {
+      var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
+      var ticker = opts('ticker');
       var p_ticks = p_axis.ticks;
       var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
       var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
@@ -2742,7 +2763,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
                           this,
                           tick_values);
     }
-  }
+  }  
 };
 
 /**

diff --git a/plugins/grid.js b/plugins/grid.js
index 9186dd4..5d9b6c6 100644 (file)
--- a/plugins/grid.js
+++ b/plugins/grid.js
@@ -50,29 +50,55 @@ grid.prototype.willDrawChart = function(e) {
 
   var x, y, i, ticks;
   if (g.getOption('drawYGrid')) {
+    var axes = ["y","y2"];
+    var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern =[];
+    for(var index in axes){
+      drawGrid[index] = g.getOptionForAxis("drawGrid",axes[index]);
+      if(drawGrid[index]){
+        strokeStyles[index] = g.getOptionForAxis('gridLineColor',axes[index]);
+        lineWidths[index] = g.getOptionForAxis('gridLineWidth',axes[index]);
+        strokePattern[index] = g.getOptionForAxis('gridLinePattern',axes[index]);
+        stroking[index] = strokePattern[index] && (strokePattern[index].length >= 2);
+      }
+    }
     ticks = layout.yticks;
     ctx.save();
-    ctx.strokeStyle = g.getOption('gridLineColor');
-    ctx.lineWidth = g.getOption('gridLineWidth');
+    // draw grids for the differen axes
     for (i = 0; i < ticks.length; i++) {
-      // TODO(danvk): allow secondary axes to draw a grid, too.
-      if (ticks[i][0] !== 0) continue;
-      x = halfUp(area.x);
-      y = halfDown(area.y + ticks[i][1] * area.h);
-      ctx.beginPath();
-      ctx.moveTo(x, y);
-      ctx.lineTo(x + area.w, y);
-      ctx.closePath();
-      ctx.stroke();
+      var axis = ticks[i][0];
+      if(drawGrid[axis]){
+        if (stroking[axis]) {
+          ctx.installPattern(strokePattern[axis]);
+        }
+        ctx.strokeStyle = strokeStyles[axis];
+        ctx.lineWidth = lineWidths[axis];
+
+        x = halfUp(area.x);
+        y = halfDown(area.y + ticks[i][1] * area.h);
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + area.w, y);
+        ctx.closePath();
+        ctx.stroke();
+
+        if (stroking[axis]) {
+          ctx.uninstallPattern();
+        }
+         }
     }
     ctx.restore();
   }
 
-  if (g.getOption('drawXGrid')) {
+  if (g.getOption('drawXGrid') && g.getOptionForAxis("drawGrid",'x')) {
     ticks = layout.xticks;
     ctx.save();
-    ctx.strokeStyle = g.getOption('gridLineColor');
-    ctx.lineWidth = g.getOption('gridLineWidth');
+    var strokePattern = g.getOptionForAxis('gridLinePattern','x');
+    var stroking = strokePattern && (strokePattern.length >= 2);
+    if (stroking) {
+      ctx.installPattern(strokePattern);
+    }
+    ctx.strokeStyle = g.getOptionForAxis('gridLineColor','x');
+    ctx.lineWidth = g.getOptionForAxis('gridLineWidth','x');
     for (i = 0; i < ticks.length; i++) {
       x = halfUp(area.x + ticks[i][0] * area.w);
       y = halfDown(area.y + area.h);
@@ -82,6 +108,9 @@ grid.prototype.willDrawChart = function(e) {
       ctx.closePath();
       ctx.stroke();
     }
+    if (stroking) {
+        ctx.uninstallPattern();
+    }
     ctx.restore();
   }
 };