From: Dan Vanderkam Date: Fri, 6 Jul 2012 03:51:36 +0000 (-0700) Subject: grid plugin mostly working X-Git-Tag: v1.0.0~241 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=cbe41be103cc129ff2477a872cb802538aafb3d3;p=dygraphs.git grid plugin mostly working --- diff --git a/dygraph-canvas.js b/dygraph-canvas.js index d100269..50ff486 100644 --- 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 /tmp/dygraph.js diff --git a/plugins/grid.js b/plugins/grid.js new file mode 100644 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 --- 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 );