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