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