plugins/grid.js

   1 /**
   2  * @license
   3  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6
   7 Dygraph.Plugins.Grid = (function() {
   8
   9 /*
  10
  11 Current bits of jankiness:
  12
  13 */
  14
  15 "use strict";
  16
  17
  18 /**
  19  * Draws the gridlines, i.e. the gray horizontal & vertical lines running the
  20  * length of the chart.
  21  *
  22  * @constructor
  23  */
  24 var grid = function() {
  25 };
  26
  27 grid.prototype.toString = function() {
  28   return "Gridline Plugin";
  29 };
  30
  31 grid.prototype.activate = function(g) {
  32   return {
  33     willDrawChart: this.willDrawChart
  34   };
  35 };
  36
  37 grid.prototype.willDrawChart = function(e) {
  38   // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
  39   // half-integers. This prevents them from drawing in two rows/cols.
  40   var g = e.dygraph;
  41   var ctx = e.drawingContext;
  42   var layout = g.layout_;
  43   var area = e.dygraph.plotter_.area;
  44
  45   function halfUp(x)  { return Math.round(x) + 0.5; }
  46   function halfDown(y){ return Math.round(y) - 0.5; }
  47
  48   var x, y, i, ticks;
  49   if (g.getOption('drawYGrid')) {
  50     ticks = layout.yticks;
  51     ctx.save();
  52     ctx.strokeStyle = g.getOption('gridLineColor');
  53     ctx.lineWidth = g.getOption('gridLineWidth');
  54     for (i = 0; i < ticks.length; i++) {
  55       // TODO(danvk): allow secondary axes to draw a grid, too.
  56       if (ticks[i][0] !== 0) continue;
  57       x = halfUp(area.x);
  58       y = halfDown(area.y + ticks[i][1] * area.h);
  59       ctx.beginPath();
  60       ctx.moveTo(x, y);
  61       ctx.lineTo(x + area.w, y);
  62       ctx.closePath();
  63       ctx.stroke();
  64     }
  65     ctx.restore();
  66   }
  67
  68   if (g.getOption('drawXGrid')) {
  69     ticks = layout.xticks;
  70     ctx.save();
  71     ctx.strokeStyle = g.getOption('gridLineColor');
  72     ctx.lineWidth = g.getOption('gridLineWidth');
  73     for (i = 0; i < ticks.length; i++) {
  74       x = halfUp(area.x + ticks[i][0] * area.w);
  75       y = halfDown(area.y + area.h);
  76       ctx.beginPath();
  77       ctx.moveTo(x, y);
  78       ctx.lineTo(x, area.y);
  79       ctx.closePath();
  80       ctx.stroke();
  81     }
  82     ctx.restore();
  83   }
  84 }
  85
  86 grid.prototype.destroy = function() {
  87 };
  88
  89 return grid;
  90
  91 })();