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