src/plugins/grid.js

   1 /**
   2  * @license
   3  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6 /*global Dygraph:false */
   7
   8 Dygraph.Plugins.Grid = (function() {
   9
  10 /*
  11
  12 Current bits of jankiness:
  13 - Direct layout access
  14 - Direct area access
  15
  16 */
  17
  18 "use strict";
  19
  20
  21 /**
  22  * Draws the gridlines, i.e. the gray horizontal & vertical lines running the
  23  * length of the chart.
  24  *
  25  * @constructor
  26  */
  27 var grid = function() {
  28 };
  29
  30 grid.prototype.toString = function() {
  31   return "Gridline Plugin";
  32 };
  33
  34 grid.prototype.activate = function(g) {
  35   return {
  36     willDrawChart: this.willDrawChart
  37   };
  38 };
  39
  40 grid.prototype.willDrawChart = function(e) {
  41   // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
  42   // half-integers. This prevents them from drawing in two rows/cols.
  43   var g = e.dygraph;
  44   var ctx = e.drawingContext;
  45   var layout = g.layout_;
  46   var area = e.dygraph.plotter_.area;
  47
  48   function halfUp(x)  { return Math.round(x) + 0.5; }
  49   function halfDown(y){ return Math.round(y) - 0.5; }
  50
  51   var x, y, i, ticks;
  52   if (g.getOptionForAxis('drawGrid', 'y')) {
  53     var axes = ["y", "y2"];
  54     var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern = [];
  55     for (var i = 0; i < axes.length; i++) {
  56       drawGrid[i] = g.getOptionForAxis('drawGrid', axes[i]);
  57       if (drawGrid[i]) {
  58         strokeStyles[i] = g.getOptionForAxis('gridLineColor', axes[i]);
  59         lineWidths[i] = g.getOptionForAxis('gridLineWidth', axes[i]);
  60         strokePattern[i] = g.getOptionForAxis('gridLinePattern', axes[i]);
  61         stroking[i] = strokePattern[i] && (strokePattern[i].length >= 2);
  62       }
  63     }
  64     ticks = layout.yticks;
  65     ctx.save();
  66     // draw grids for the different y axes
  67     for (i = 0; i < ticks.length; i++) {
  68       var axis = ticks[i][0];
  69       if(drawGrid[axis]) {
  70         if (stroking[axis]) {
  71           ctx.installPattern(strokePattern[axis]);
  72         }
  73         ctx.strokeStyle = strokeStyles[axis];
  74         ctx.lineWidth = lineWidths[axis];
  75
  76         x = halfUp(area.x);
  77         y = halfDown(area.y + ticks[i][1] * area.h);
  78         ctx.beginPath();
  79         ctx.moveTo(x, y);
  80         ctx.lineTo(x + area.w, y);
  81         ctx.closePath();
  82         ctx.stroke();
  83
  84         if (stroking[axis]) {
  85           ctx.uninstallPattern();
  86         }
  87       }
  88     }
  89     ctx.restore();
  90   }
  91
  92   // draw grid for x axis
  93   if (g.getOptionForAxis('drawGrid', 'x')) {
  94     ticks = layout.xticks;
  95     ctx.save();
  96     var strokePattern = g.getOptionForAxis('gridLinePattern', 'x');
  97     var stroking = strokePattern && (strokePattern.length >= 2);
  98     if (stroking) {
  99       ctx.installPattern(strokePattern);
 100     }
 101     ctx.strokeStyle = g.getOptionForAxis('gridLineColor', 'x');
 102     ctx.lineWidth = g.getOptionForAxis('gridLineWidth', 'x');
 103     for (i = 0; i < ticks.length; i++) {
 104       x = halfUp(area.x + ticks[i][0] * area.w);
 105       y = halfDown(area.y + area.h);
 106       ctx.beginPath();
 107       ctx.moveTo(x, y);
 108       ctx.lineTo(x, area.y);
 109       ctx.closePath();
 110       ctx.stroke();
 111     }
 112     if (stroking) {
 113       ctx.uninstallPattern();
 114     }
 115     ctx.restore();
 116   }
 117 };
 118
 119 grid.prototype.destroy = function() {
 120 };
 121
 122 return grid;
 123
 124 })();