plugins/axes.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.Axes = (function() {
   8
   9 "use strict";
  10
  11 /*
  12
  13 Bits of jankiness:
  14 - Direct layout access
  15 - Direct area access
  16 - Should include calculation of ticks, not just the drawing.
  17
  18 */
  19
  20 /**
  21  * Draws the axes. This includes the labels on the x- and y-axes, as well
  22  * as the tick marks on the axes.
  23  * It does _not_ draw the grid lines which span the entire chart.
  24  */
  25 var axes = function() {
  26   this.xlabels_ = [];
  27   this.ylabels_ = [];
  28 };
  29
  30 axes.prototype.toString = function() {
  31   return "Axes Plugin";
  32 };
  33
  34 axes.prototype.activate = function(g) {
  35   return {
  36     layout: this.layout,
  37     clearChart: this.clearChart,
  38     willDrawChart: this.willDrawChart
  39   };
  40 };
  41
  42 axes.prototype.layout = function(e) {
  43   var g = e.dygraph;
  44
  45   if (g.getOption('drawYAxis')) {
  46     var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize');
  47     var y_axis_rect = e.reserveSpaceLeft(w);
  48   }
  49
  50   if (g.getOption('drawXAxis')) {
  51     var h;
  52     if (g.getOption('xAxisHeight')) {
  53       h = g.getOption('xAxisHeight');
  54     } else {
  55       h = g.getOption('axisLabelFontSize') + 2 * g.getOption('axisTickSize');
  56     }
  57     var x_axis_rect = e.reserveSpaceBottom(h);
  58   }
  59
  60   if (g.numAxes() == 2) {
  61     // TODO(danvk): per-axis setting.
  62     var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize');
  63     var y2_axis_rect = e.reserveSpaceRight(w);
  64   } else if (g.numAxes() > 2) {
  65     g.error("Only two y-axes are supported at this time. (Trying " +
  66             "to use " + g.numAxes() + ")");
  67   }
  68 };
  69
  70 axes.prototype.detachLabels = function() {
  71   function removeArray(ary) {
  72     for (var i = 0; i < ary.length; i++) {
  73       var el = ary[i];
  74       if (el.parentNode) el.parentNode.removeChild(el);
  75     }
  76   }
  77
  78   removeArray(this.xlabels_);
  79   removeArray(this.ylabels_);
  80   this.xlabels_ = [];
  81   this.ylabels_ = [];
  82 };
  83
  84 axes.prototype.clearChart = function(e) {
  85   var g = e.dygraph;
  86   this.detachLabels();
  87 };
  88
  89 axes.prototype.willDrawChart = function(e) {
  90   var g = e.dygraph;
  91   if (!g.getOption('drawXAxis') && !g.getOption('drawYAxis')) return;
  92
  93   // Round pixels to half-integer boundaries for crisper drawing.
  94   function halfUp(x)  { return Math.round(x) + 0.5; }
  95   function halfDown(y){ return Math.round(y) - 0.5; }
  96
  97   var context = e.drawingContext;
  98   var containerDiv = e.canvas.parentNode;
  99   var canvasWidth = e.canvas.width;
 100   var canvasHeight = e.canvas.height;
 101
 102   var label, x, y, tick, i;
 103
 104   var labelStyle = {
 105     position: "absolute",
 106     fontSize: g.getOption('axisLabelFontSize') + "px",
 107     zIndex: 10,
 108     color: g.getOption('axisLabelColor'),
 109     width: g.getOption('axisLabelWidth') + "px",
 110     // height: this.attr_('axisLabelFontSize') + 2 + "px",
 111     lineHeight: "normal",  // Something other than "normal" line-height screws up label positioning.
 112     overflow: "hidden"
 113   };
 114   var makeDiv = function(txt, axis, prec_axis) {
 115     var div = document.createElement("div");
 116     for (var name in labelStyle) {
 117       if (labelStyle.hasOwnProperty(name)) {
 118         div.style[name] = labelStyle[name];
 119       }
 120     }
 121     var inner_div = document.createElement("div");
 122     inner_div.className = 'dygraph-axis-label' +
 123                           ' dygraph-axis-label-' + axis +
 124                           (prec_axis ? ' dygraph-axis-label-' + prec_axis : '');
 125     inner_div.innerHTML = txt;
 126     div.appendChild(inner_div);
 127     return div;
 128   };
 129
 130   // axis lines
 131   context.save();
 132   context.strokeStyle = g.getOption('axisLineColor');
 133   context.lineWidth = g.getOption('axisLineWidth');
 134
 135   var layout = g.layout_;
 136   var area = e.dygraph.plotter_.area;
 137
 138   if (g.getOption('drawYAxis')) {
 139     if (layout.yticks && layout.yticks.length > 0) {
 140       var num_axes = g.numAxes();
 141       for (i = 0; i < layout.yticks.length; i++) {
 142         tick = layout.yticks[i];
 143         if (typeof(tick) == "function") return;
 144         x = area.x;
 145         var sgn = 1;
 146         var prec_axis = 'y1';
 147         if (tick[0] == 1) {  // right-side y-axis
 148           x = area.x + area.w;
 149           sgn = -1;
 150           prec_axis = 'y2';
 151         }
 152         y = area.y + tick[1] * area.h;
 153
 154         /* Tick marks are currently clipped, so don't bother drawing them.
 155         context.beginPath();
 156         context.moveTo(halfUp(x), halfDown(y));
 157         context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
 158         context.closePath();
 159         context.stroke();
 160         */
 161
 162         label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
 163         var top = (y - g.getOption('axisLabelFontSize') / 2);
 164         if (top < 0) top = 0;
 165
 166         if (top + g.getOption('axisLabelFontSize') + 3 > canvasHeight) {
 167           label.style.bottom = "0px";
 168         } else {
 169           label.style.top = top + "px";
 170         }
 171         if (tick[0] === 0) {
 172           label.style.left = (area.x - g.getOption('yAxisLabelWidth') - g.getOption('axisTickSize')) + "px";
 173           label.style.textAlign = "right";
 174         } else if (tick[0] == 1) {
 175           label.style.left = (area.x + area.w +
 176                               g.getOption('axisTickSize')) + "px";
 177           label.style.textAlign = "left";
 178         }
 179         label.style.width = g.getOption('yAxisLabelWidth') + "px";
 180         containerDiv.appendChild(label);
 181         this.ylabels_.push(label);
 182       }
 183
 184       // The lowest tick on the y-axis often overlaps with the leftmost
 185       // tick on the x-axis. Shift the bottom tick up a little bit to
 186       // compensate if necessary.
 187       var bottomTick = this.ylabels_[0];
 188       var fontSize = g.getOption('axisLabelFontSize');
 189       var bottom = parseInt(bottomTick.style.top, 10) + fontSize;
 190       if (bottom > canvasHeight - fontSize) {
 191         bottomTick.style.top = (parseInt(bottomTick.style.top, 10) -
 192             fontSize / 2) + "px";
 193       }
 194     }
 195
 196     // draw a vertical line on the left to separate the chart from the labels.
 197     var axisX;
 198     if (g.getOption('drawAxesAtZero')) {
 199       var r = g.toPercentXCoord(0);
 200       if (r > 1 || r < 0) r = 0;
 201       axisX = halfUp(area.x + r * area.w);
 202     } else {
 203       axisX = halfUp(area.x);
 204     }
 205     context.beginPath();
 206     context.moveTo(axisX, halfDown(area.y));
 207     context.lineTo(axisX, halfDown(area.y + area.h));
 208     context.closePath();
 209     context.stroke();
 210
 211     // if there's a secondary y-axis, draw a vertical line for that, too.
 212     if (g.numAxes() == 2) {
 213       context.beginPath();
 214       context.moveTo(halfDown(area.x + area.w), halfDown(area.y));
 215       context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h));
 216       context.closePath();
 217       context.stroke();
 218     }
 219   }
 220
 221   if (g.getOption('drawXAxis')) {
 222     if (layout.xticks) {
 223       for (i = 0; i < layout.xticks.length; i++) {
 224         tick = layout.xticks[i];
 225         x = area.x + tick[0] * area.w;
 226         y = area.y + area.h;
 227
 228         /* Tick marks are currently clipped, so don't bother drawing them.
 229         context.beginPath();
 230         context.moveTo(halfUp(x), halfDown(y));
 231         context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
 232         context.closePath();
 233         context.stroke();
 234         */
 235
 236         label = makeDiv(tick[1], 'x');
 237         label.style.textAlign = "center";
 238         label.style.top = (y + g.getOption('axisTickSize')) + 'px';
 239
 240         var left = (x - g.getOption('axisLabelWidth')/2);
 241         if (left + g.getOption('axisLabelWidth') > canvasWidth) {
 242           left = canvasWidth - g.getOption('xAxisLabelWidth');
 243           label.style.textAlign = "right";
 244         }
 245         if (left < 0) {
 246           left = 0;
 247           label.style.textAlign = "left";
 248         }
 249
 250         label.style.left = left + "px";
 251         label.style.width = g.getOption('xAxisLabelWidth') + "px";
 252         containerDiv.appendChild(label);
 253         this.xlabels_.push(label);
 254       }
 255     }
 256
 257     context.beginPath();
 258     var axisY;
 259     if (g.getOption('drawAxesAtZero')) {
 260       var r = g.toPercentYCoord(0, 0);
 261       if (r > 1 || r < 0) r = 1;
 262       axisY = halfDown(area.y + r * area.h);
 263     } else {
 264       axisY = halfDown(area.y + area.h);
 265     }
 266     context.moveTo(halfUp(area.x), axisY);
 267     context.lineTo(halfUp(area.x + area.w), axisY);
 268     context.closePath();
 269     context.stroke();
 270   }
 271
 272   context.restore();
 273 };
 274
 275 return axes;
 276 })();