X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Fgrid.js;h=06bfcd3c0020062079a6c06d0ae2b254ca919490;hb=7ad6c698d28d7d0f0770e1f6490f1a9649c64b6f;hp=9186dd41f09c0ddc8b18115353a8ba172791bd46;hpb=0cd1ad15aefb3bd6507886e4cbba0d7587a56610;p=dygraphs.git

diff --git a/plugins/grid.js b/plugins/grid.js
index 9186dd4..06bfcd3 100644
--- 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();
   }
 };