grid plugin mostly working

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index d100269..50ff486 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -172,43 +172,6 @@ DygraphCanvasRenderer.prototype.render = function() {
     this.attr_('underlayCallback')(ctx, this.area, this.dygraph_, this.dygraph_);
   }
 
-  var x, y, i, ticks;
-  if (this.attr_('drawYGrid')) {
-    ticks = this.layout.yticks;
-    ctx.save();
-    ctx.strokeStyle = this.attr_('gridLineColor');
-    ctx.lineWidth = this.attr_('gridLineWidth');
-    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(this.area.x);
-      y = halfDown(this.area.y + ticks[i][1] * this.area.h);
-      ctx.beginPath();
-      ctx.moveTo(x, y);
-      ctx.lineTo(x + this.area.w, y);
-      ctx.closePath();
-      ctx.stroke();
-    }
-    ctx.restore();
-  }
-
-  if (this.attr_('drawXGrid')) {
-    ticks = this.layout.xticks;
-    ctx.save();
-    ctx.strokeStyle = this.attr_('gridLineColor');
-    ctx.lineWidth = this.attr_('gridLineWidth');
-    for (i=0; i<ticks.length; i++) {
-      x = halfUp(this.area.x + ticks[i][0] * this.area.w);
-      y = halfDown(this.area.y + this.area.h);
-      ctx.beginPath();
-      ctx.moveTo(x, y);
-      ctx.lineTo(x, this.area.y);
-      ctx.closePath();
-      ctx.stroke();
-    }
-    ctx.restore();
-  }
-
   // Do the ordinary rendering, as before
   this._renderLineChart();
 };

diff --git a/dygraph-dev.js b/dygraph-dev.js
index 05ff1b5..207c3f4 100644 (file)
--- a/dygraph-dev.js
+++ b/dygraph-dev.js
@@ -28,10 +28,11 @@
     "dygraph-range-selector.js",
     "dygraph-tickers.js",
     "plugins/base.js",
+    "plugins/annotations.js",
     "plugins/axes.js",
-    "plugins/legend.js",
     "plugins/chart-labels.js",
-    "plugins/annotations.js",
+    "plugins/grid.js",
+    "plugins/legend.js",
     "plugins/install.js",
     "dygraph-options-reference.js"  // Shouldn't be included in generate-combined.sh
   ];

diff --git a/generate-combined.sh b/generate-combined.sh
index c8cda6c..aac11f3 100755 (executable)
--- a/generate-combined.sh
+++ b/generate-combined.sh
@@ -17,10 +17,11 @@ dygraph-tickers.js \
 rgbcolor/rgbcolor.js \
 strftime/strftime-min.js \
 plugins/base.js \
+plugins/annotations.js \
 plugins/axes.js \
-plugins/legend.js \
 plugins/chart-labels \
-plugins/annotations.js \
+plugins/grid \
+plugins/legend.js \
 plugins/install.js \
 | perl -ne 'print unless m,REMOVE_FOR_COMBINED,..m,/REMOVE_FOR_COMBINED,' \
 > /tmp/dygraph.js

diff --git a/plugins/grid.js b/plugins/grid.js
new file mode 100644 (file)
index 0000000..3ccc2ae
--- /dev/null
+++ b/plugins/grid.js
@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
+ * MIT-licensed (http://opensource.org/licenses/MIT)
+ */
+
+Dygraph.Plugins.Grid = (function() {
+
+/*
+
+Current bits of jankiness:
+
+*/
+
+"use strict";
+
+
+/**
+ * Draws the gridlines, i.e. the gray horizontal & vertical lines running the
+ * length of the chart.
+ *
+ * @constructor
+ */
+var grid = function() {
+};
+
+grid.prototype.toString = function() {
+  return "Gridline Plugin";
+};
+
+grid.prototype.activate = function(g) {
+  return {
+    drawChart: this.drawChart
+  };
+};
+
+grid.prototype.drawChart = function(e) {
+  // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
+  // half-integers. This prevents them from drawing in two rows/cols.
+  var g = e.dygraph;
+  var ctx = e.drawingContext;
+  var layout = g.layout_;
+  var area = e.dygraph.plotter_.area;
+
+  function halfUp(x)  { return Math.round(x) + 0.5; }
+  function halfDown(y){ return Math.round(y) - 0.5; }
+
+  var x, y, i, ticks;
+  if (g.getOption('drawYGrid')) {
+    ticks = layout.yticks;
+    ctx.save();
+    ctx.strokeStyle = g.getOption('gridLineColor');
+    ctx.lineWidth = g.getOption('gridLineWidth');
+    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();
+    }
+    ctx.restore();
+  }
+
+  if (g.getOption('drawXGrid')) {
+    ticks = layout.xticks;
+    ctx.save();
+    ctx.strokeStyle = g.getOption('gridLineColor');
+    ctx.lineWidth = g.getOption('gridLineWidth');
+    for (i = 0; i < ticks.length; i++) {
+      x = halfUp(area.x + ticks[i][0] * area.w);
+      y = halfDown(area.y + area.h);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x, area.y);
+      ctx.closePath();
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+}
+
+grid.prototype.destroy = function() {
+};
+
+return grid;
+
+})();

diff --git a/plugins/install.js b/plugins/install.js
index c87b06e..a8dd0e6 100644 (file)
--- a/plugins/install.js
+++ b/plugins/install.js
@@ -12,5 +12,6 @@ Dygraph.PLUGINS.push(
   Dygraph.Plugins.Legend,
   Dygraph.Plugins.Axes,
   Dygraph.Plugins.ChartLabels,
-  Dygraph.Plugins.Annotations
+  Dygraph.Plugins.Annotations,
+  Dygraph.Plugins.Grid
 );