dygraph-canvas.js

   1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
   2 // All Rights Reserved.
   3
   4 /**
   5  * @fileoverview Based on PlotKit, but modified to meet the needs of dygraphs.
   6  * In particular, support for:
   7  * - grid overlays
   8  * - error bars
   9  * - dygraphs attribute system
  10  */
  11
  12 /**
  13  * Creates a new DygraphLayout object.
  14  * @param {Object} options Options for PlotKit.Layout
  15  * @return {Object} The DygraphLayout object
  16  */
  17 DygraphLayout = function(dygraph, options) {
  18   this.dygraph_ = dygraph;
  19   this.options = {};  // TODO(danvk): remove, use attr_ instead.
  20   Dygraph.update(this.options, options ? options : {});
  21   this.datasets = new Array();
  22 };
  23
  24 DygraphLayout.prototype.attr_ = function(name) {
  25   return this.dygraph_.attr_(name);
  26 };
  27
  28 DygraphLayout.prototype.addDataset = function(setname, set_xy) {
  29   this.datasets[setname] = set_xy;
  30 };
  31
  32 DygraphLayout.prototype.evaluate = function() {
  33   this._evaluateLimits();
  34   this._evaluateLineCharts();
  35   this._evaluateLineTicks();
  36 };
  37
  38 DygraphLayout.prototype._evaluateLimits = function() {
  39   this.minxval = this.maxxval = null;
  40   if (this.options.dateWindow) {
  41     this.minxval = this.options.dateWindow[0];
  42     this.maxxval = this.options.dateWindow[1];
  43   } else {
  44     for (var name in this.datasets) {
  45       if (!this.datasets.hasOwnProperty(name)) continue;
  46       var series = this.datasets[name];
  47       var x1 = series[0][0];
  48       if (!this.minxval || x1 < this.minxval) this.minxval = x1;
  49
  50       var x2 = series[series.length - 1][0];
  51       if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2;
  52     }
  53   }
  54   this.xrange = this.maxxval - this.minxval;
  55   this.xscale = (this.xrange != 0 ? 1/this.xrange : 1.0);
  56
  57   this.minyval = this.options.yAxis[0];
  58   this.maxyval = this.options.yAxis[1];
  59   this.yrange = this.maxyval - this.minyval;
  60   this.yscale = (this.yrange != 0 ? 1/this.yrange : 1.0);
  61 };
  62
  63 DygraphLayout.prototype._evaluateLineCharts = function() {
  64   // add all the rects
  65   this.points = new Array();
  66   for (var setName in this.datasets) {
  67     if (!this.datasets.hasOwnProperty(setName)) continue;
  68
  69     var dataset = this.datasets[setName];
  70     for (var j = 0; j < dataset.length; j++) {
  71       var item = dataset[j];
  72       var point = {
  73         // TODO(danvk): here
  74         x: ((parseFloat(item[0]) - this.minxval) * this.xscale),
  75         y: 1.0 - ((parseFloat(item[1]) - this.minyval) * this.yscale),
  76         xval: parseFloat(item[0]),
  77         yval: parseFloat(item[1]),
  78         name: setName
  79       };
  80
  81       // limit the x, y values so they do not overdraw
  82       if (point.y <= 0.0) {
  83         point.y = 0.0;
  84       }
  85       if (point.y >= 1.0) {
  86         point.y = 1.0;
  87       }
  88       this.points.push(point);
  89     }
  90   }
  91 };
  92
  93 DygraphLayout.prototype._evaluateLineTicks = function() {
  94   this.xticks = new Array();
  95   for (var i = 0; i < this.options.xTicks.length; i++) {
  96     var tick = this.options.xTicks[i];
  97     var label = tick.label;
  98     var pos = this.xscale * (tick.v - this.minxval);
  99     if ((pos >= 0.0) && (pos <= 1.0)) {
 100       this.xticks.push([pos, label]);
 101     }
 102   }
 103
 104   this.yticks = new Array();
 105   for (var i = 0; i < this.options.yTicks.length; i++) {
 106     var tick = this.options.yTicks[i];
 107     var label = tick.label;
 108     var pos = 1.0 - (this.yscale * (tick.v - this.minyval));
 109     if ((pos >= 0.0) && (pos <= 1.0)) {
 110       this.yticks.push([pos, label]);
 111     }
 112   }
 113 };
 114
 115
 116 /**
 117  * Behaves the same way as PlotKit.Layout, but also copies the errors
 118  * @private
 119  */
 120 DygraphLayout.prototype.evaluateWithError = function() {
 121   this.evaluate();
 122   if (!this.options.errorBars) return;
 123
 124   // Copy over the error terms
 125   var i = 0; // index in this.points
 126   for (var setName in this.datasets) {
 127     if (!this.datasets.hasOwnProperty(setName)) continue;
 128     var j = 0;
 129     var dataset = this.datasets[setName];
 130     for (var j = 0; j < dataset.length; j++, i++) {
 131       var item = dataset[j];
 132       var xv = parseFloat(item[0]);
 133       var yv = parseFloat(item[1]);
 134
 135       if (xv == this.points[i].xval &&
 136           yv == this.points[i].yval) {
 137         this.points[i].errorMinus = parseFloat(item[2]);
 138         this.points[i].errorPlus = parseFloat(item[3]);
 139       }
 140     }
 141   }
 142 };
 143
 144 /**
 145  * Convenience function to remove all the data sets from a graph
 146  */
 147 DygraphLayout.prototype.removeAllDatasets = function() {
 148   delete this.datasets;
 149   this.datasets = new Array();
 150 };
 151
 152 /**
 153  * Change the values of various layout options
 154  * @param {Object} new_options an associative array of new properties
 155  */
 156 DygraphLayout.prototype.updateOptions = function(new_options) {
 157   Dygraph.update(this.options, new_options ? new_options : {});
 158 };
 159
 160 // Subclass PlotKit.CanvasRenderer to add:
 161 // 1. X/Y grid overlay
 162 // 2. Ability to draw error bars (if required)
 163
 164 /**
 165  * Sets some PlotKit.CanvasRenderer options
 166  * @param {Object} element The canvas to attach to
 167  * @param {Layout} layout The DygraphLayout object for this graph.
 168  * @param {Object} options Options to pass on to CanvasRenderer
 169  */
 170 DygraphCanvasRenderer = function(dygraph, element, layout, options) {
 171   // TODO(danvk): remove options, just use dygraph.attr_.
 172   this.dygraph_ = dygraph;
 173
 174   // default options
 175   this.options = {
 176     "strokeWidth": 0.5,
 177     "drawXAxis": true,
 178     "drawYAxis": true,
 179     "axisLineColor": "black",
 180     "axisLineWidth": 0.5,
 181     "axisTickSize": 3,
 182     "axisLabelColor": "black",
 183     "axisLabelFont": "Arial",
 184     "axisLabelFontSize": 9,
 185     "axisLabelWidth": 50,
 186     "drawYGrid": true,
 187     "drawXGrid": true,
 188     "gridLineColor": "rgb(128,128,128)",
 189     "fillAlpha": 0.15,
 190     "underlayCallback": null
 191   };
 192   Dygraph.update(this.options, options);
 193
 194   this.layout = layout;
 195   this.element = element;
 196   this.container = this.element.parentNode;
 197
 198   this.height = this.element.height;
 199   this.width = this.element.width;
 200
 201   // --- check whether everything is ok before we return
 202   if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element)))
 203       throw "Canvas is not supported.";
 204
 205   // internal state
 206   this.xlabels = new Array();
 207   this.ylabels = new Array();
 208
 209   this.area = {
 210     x: this.options.yAxisLabelWidth + 2 * this.options.axisTickSize,
 211     y: 0
 212   };
 213   this.area.w = this.width - this.area.x - this.options.rightGap;
 214   this.area.h = this.height - this.options.axisLabelFontSize -
 215                 2 * this.options.axisTickSize;
 216
 217   this.container.style.position = "relative";
 218   this.container.style.width = this.width + "px";
 219 };
 220
 221 DygraphCanvasRenderer.prototype.clear = function() {
 222   if (this.isIE) {
 223     // VML takes a while to start up, so we just poll every this.IEDelay
 224     try {
 225       if (this.clearDelay) {
 226         this.clearDelay.cancel();
 227         this.clearDelay = null;
 228       }
 229       var context = this.element.getContext("2d");
 230     }
 231     catch (e) {
 232       // TODO(danvk): this is broken, since MochiKit.Async is gone.
 233       this.clearDelay = MochiKit.Async.wait(this.IEDelay);
 234       this.clearDelay.addCallback(bind(this.clear, this));
 235       return;
 236     }
 237   }
 238
 239   var context = this.element.getContext("2d");
 240   context.clearRect(0, 0, this.width, this.height);
 241
 242   for (var i = 0; i < this.xlabels.length; i++) {
 243     var el = this.xlabels[i];
 244     el.parentNode.removeChild(el);
 245   }
 246   for (var i = 0; i < this.ylabels.length; i++) {
 247     var el = this.ylabels[i];
 248     el.parentNode.removeChild(el);
 249   }
 250   this.xlabels = new Array();
 251   this.ylabels = new Array();
 252 };
 253
 254
 255 DygraphCanvasRenderer.isSupported = function(canvasName) {
 256   var canvas = null;
 257   try {
 258     if (typeof(canvasName) == 'undefined' || canvasName == null)
 259       canvas = document.createElement("canvas");
 260     else
 261       canvas = canvasName;
 262     var context = canvas.getContext("2d");
 263   }
 264   catch (e) {
 265     var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
 266     var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
 267     if ((!ie) || (ie[1] < 6) || (opera))
 268       return false;
 269     return true;
 270   }
 271   return true;
 272 };
 273
 274 /**
 275  * Draw an X/Y grid on top of the existing plot
 276  */
 277 DygraphCanvasRenderer.prototype.render = function() {
 278   // Draw the new X/Y grid
 279   var ctx = this.element.getContext("2d");
 280
 281   if (this.options.underlayCallback) {
 282     this.options.underlayCallback(ctx, this.area, this.layout, this.dygraph_);
 283   }
 284
 285   if (this.options.drawYGrid) {
 286     var ticks = this.layout.yticks;
 287     ctx.save();
 288     ctx.strokeStyle = this.options.gridLineColor;
 289     ctx.lineWidth = this.options.axisLineWidth;
 290     for (var i = 0; i < ticks.length; i++) {
 291       var x = this.area.x;
 292       var y = this.area.y + ticks[i][0] * this.area.h;
 293       ctx.beginPath();
 294       ctx.moveTo(x, y);
 295       ctx.lineTo(x + this.area.w, y);
 296       ctx.closePath();
 297       ctx.stroke();
 298     }
 299   }
 300
 301   if (this.options.drawXGrid) {
 302     var ticks = this.layout.xticks;
 303     ctx.save();
 304     ctx.strokeStyle = this.options.gridLineColor;
 305     ctx.lineWidth = this.options.axisLineWidth;
 306     for (var i=0; i<ticks.length; i++) {
 307       var x = this.area.x + ticks[i][0] * this.area.w;
 308       var y = this.area.y + this.area.h;
 309       ctx.beginPath();
 310       ctx.moveTo(x, y);
 311       ctx.lineTo(x, this.area.y);
 312       ctx.closePath();
 313       ctx.stroke();
 314     }
 315   }
 316
 317   // Do the ordinary rendering, as before
 318   this._renderLineChart();
 319   this._renderAxis();
 320 };
 321
 322
 323 DygraphCanvasRenderer.prototype._renderAxis = function() {
 324   if (!this.options.drawXAxis && !this.options.drawYAxis)
 325     return;
 326
 327   var context = this.element.getContext("2d");
 328
 329   var labelStyle = {
 330     "position": "absolute",
 331     "fontSize": this.options.axisLabelFontSize + "px",
 332     "zIndex": 10,
 333     "color": this.options.axisLabelColor,
 334     "width": this.options.axisLabelWidth + "px",
 335     "overflow": "hidden"
 336   };
 337   var makeDiv = function(txt) {
 338     var div = document.createElement("div");
 339     for (var name in labelStyle) {
 340       if (labelStyle.hasOwnProperty(name)) {
 341         div.style[name] = labelStyle[name];
 342       }
 343     }
 344     div.appendChild(document.createTextNode(txt));
 345     return div;
 346   };
 347
 348   // axis lines
 349   context.save();
 350   context.strokeStyle = this.options.axisLineColor;
 351   context.lineWidth = this.options.axisLineWidth;
 352
 353   if (this.options.drawYAxis) {
 354     if (this.layout.yticks && this.layout.yticks.length > 0) {
 355       for (var i = 0; i < this.layout.yticks.length; i++) {
 356         var tick = this.layout.yticks[i];
 357         if (typeof(tick) == "function") return;
 358         var x = this.area.x;
 359         var y = this.area.y + tick[0] * this.area.h;
 360         context.beginPath();
 361         context.moveTo(x, y);
 362         context.lineTo(x - this.options.axisTickSize, y);
 363         context.closePath();
 364         context.stroke();
 365
 366         var label = makeDiv(tick[1]);
 367         var top = (y - this.options.axisLabelFontSize / 2);
 368         if (top < 0) top = 0;
 369
 370         if (top + this.options.axisLabelFontSize + 3 > this.height) {
 371           label.style.bottom = "0px";
 372         } else {
 373           label.style.top = top + "px";
 374         }
 375         label.style.left = "0px";
 376         label.style.textAlign = "right";
 377         label.style.width = this.options.yAxisLabelWidth + "px";
 378         this.container.appendChild(label);
 379         this.ylabels.push(label);
 380       }
 381
 382       // The lowest tick on the y-axis often overlaps with the leftmost
 383       // tick on the x-axis. Shift the bottom tick up a little bit to
 384       // compensate if necessary.
 385       var bottomTick = this.ylabels[0];
 386       var fontSize = this.options.axisLabelFontSize;
 387       var bottom = parseInt(bottomTick.style.top) + fontSize;
 388       if (bottom > this.height - fontSize) {
 389         bottomTick.style.top = (parseInt(bottomTick.style.top) -
 390             fontSize / 2) + "px";
 391       }
 392     }
 393
 394     context.beginPath();
 395     context.moveTo(this.area.x, this.area.y);
 396     context.lineTo(this.area.x, this.area.y + this.area.h);
 397     context.closePath();
 398     context.stroke();
 399   }
 400
 401   if (this.options.drawXAxis) {
 402     if (this.layout.xticks) {
 403       for (var i = 0; i < this.layout.xticks.length; i++) {
 404         var tick = this.layout.xticks[i];
 405         if (typeof(dataset) == "function") return;
 406
 407         var x = this.area.x + tick[0] * this.area.w;
 408         var y = this.area.y + this.area.h;
 409         context.beginPath();
 410         context.moveTo(x, y);
 411         context.lineTo(x, y + this.options.axisTickSize);
 412         context.closePath();
 413         context.stroke();
 414
 415         var label = makeDiv(tick[1]);
 416         label.style.textAlign = "center";
 417         label.style.bottom = "0px";
 418
 419         var left = (x - this.options.axisLabelWidth/2);
 420         if (left + this.options.axisLabelWidth > this.width) {
 421           left = this.width - this.options.xAxisLabelWidth;
 422           label.style.textAlign = "right";
 423         }
 424         if (left < 0) {
 425           left = 0;
 426           label.style.textAlign = "left";
 427         }
 428
 429         label.style.left = left + "px";
 430         label.style.width = this.options.xAxisLabelWidth + "px";
 431         this.container.appendChild(label);
 432         this.xlabels.push(label);
 433       }
 434     }
 435
 436     context.beginPath();
 437     context.moveTo(this.area.x, this.area.y + this.area.h);
 438     context.lineTo(this.area.x + this.area.w, this.area.y + this.area.h);
 439     context.closePath();
 440     context.stroke();
 441   }
 442
 443   context.restore();
 444 };
 445
 446
 447 /**
 448  * Overrides the CanvasRenderer method to draw error bars
 449  */
 450 DygraphCanvasRenderer.prototype._renderLineChart = function() {
 451   var context = this.element.getContext("2d");
 452   var colorCount = this.options.colorScheme.length;
 453   var colorScheme = this.options.colorScheme;
 454   var fillAlpha = this.options.fillAlpha;
 455   var errorBars = this.layout.options.errorBars;
 456   var fillGraph = this.layout.options.fillGraph;
 457   var stackedGraph = this.layout.options.stackedGraph;
 458
 459   var setNames = [];
 460   for (var name in this.layout.datasets) {
 461     if (this.layout.datasets.hasOwnProperty(name)) {
 462       setNames.push(name);
 463     }
 464   }
 465   var setCount = setNames.length;
 466
 467   this.colors = {}
 468   for (var i = 0; i < setCount; i++) {
 469     this.colors[setNames[i]] = colorScheme[i % colorCount];
 470   }
 471
 472   // Update Points
 473   // TODO(danvk): here
 474   for (var i = 0; i < this.layout.points.length; i++) {
 475     var point = this.layout.points[i];
 476     point.canvasx = this.area.w * point.x + this.area.x;
 477     point.canvasy = this.area.h * point.y + this.area.y;
 478   }
 479
 480   // create paths
 481   var isOK = function(x) { return x && !isNaN(x); };
 482
 483   var ctx = context;
 484   if (errorBars) {
 485     if (fillGraph) {
 486       this.dygraph_.warn("Can't use fillGraph option with error bars");
 487     }
 488
 489     for (var i = 0; i < setCount; i++) {
 490       var setName = setNames[i];
 491       var color = this.colors[setName];
 492
 493       // setup graphics context
 494       ctx.save();
 495       var prevX = NaN;
 496       var prevYs = [-1, -1];
 497       var yscale = this.layout.yscale;
 498       // should be same color as the lines but only 15% opaque.
 499       var rgb = new RGBColor(color);
 500       var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
 501                             fillAlpha + ')';
 502       ctx.fillStyle = err_color;
 503       ctx.beginPath();
 504       for (var j = 0; j < this.layout.points.length; j++) {
 505         var point = this.layout.points[j];
 506         if (point.name == setName) {
 507           if (!isOK(point.y)) {
 508             prevX = NaN;
 509             continue;
 510           }
 511           // TODO(danvk): here
 512           var newYs = [ point.y - point.errorPlus * yscale,
 513                         point.y + point.errorMinus * yscale ];
 514           newYs[0] = this.area.h * newYs[0] + this.area.y;
 515           newYs[1] = this.area.h * newYs[1] + this.area.y;
 516           if (!isNaN(prevX)) {
 517             ctx.moveTo(prevX, prevYs[0]);
 518             ctx.lineTo(point.canvasx, newYs[0]);
 519             ctx.lineTo(point.canvasx, newYs[1]);
 520             ctx.lineTo(prevX, prevYs[1]);
 521             ctx.closePath();
 522           }
 523           prevYs = newYs;
 524           prevX = point.canvasx;
 525         }
 526       }
 527       ctx.fill();
 528     }
 529   } else if (fillGraph) {
 530     var axisY = 1.0 + this.layout.minyval * this.layout.yscale;
 531     if (axisY < 0.0) axisY = 0.0;
 532     else if (axisY > 1.0) axisY = 1.0;
 533     axisY = this.area.h * axisY + this.area.y;
 534
 535     var baseline = []  // for stacked graphs: baseline for filling
 536
 537     // process sets in reverse order (needed for stacked graphs)
 538     for (var i = setCount - 1; i >= 0; i--) {
 539       var setName = setNames[i];
 540       var color = this.colors[setName];
 541
 542       // setup graphics context
 543       ctx.save();
 544       var prevX = NaN;
 545       var prevYs = [-1, -1];
 546       var yscale = this.layout.yscale;
 547       // should be same color as the lines but only 15% opaque.
 548       var rgb = new RGBColor(color);
 549       var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
 550                             fillAlpha + ')';
 551       ctx.fillStyle = err_color;
 552       ctx.beginPath();
 553       for (var j = 0; j < this.layout.points.length; j++) {
 554         var point = this.layout.points[j];
 555         if (point.name == setName) {
 556           if (!isOK(point.y)) {
 557             prevX = NaN;
 558             continue;
 559           }
 560           var newYs;
 561           if (stackedGraph) {
 562             lastY = baseline[point.canvasx];
 563             if (lastY === undefined) lastY = axisY;
 564             baseline[point.canvasx] = point.canvasy;
 565             newYs = [ point.canvasy, lastY ];
 566           } else {
 567             newYs = [ point.canvasy, axisY ];
 568           }
 569           if (!isNaN(prevX)) {
 570             ctx.moveTo(prevX, prevYs[0]);
 571             ctx.lineTo(point.canvasx, newYs[0]);
 572             ctx.lineTo(point.canvasx, newYs[1]);
 573             ctx.lineTo(prevX, prevYs[1]);
 574             ctx.closePath();
 575           }
 576           prevYs = newYs;
 577           prevX = point.canvasx;
 578         }
 579       }
 580       ctx.fill();
 581     }
 582   }
 583
 584   for (var i = 0; i < setCount; i++) {
 585     var setName = setNames[i];
 586     var color = this.colors[setName];
 587
 588     // setup graphics context
 589     context.save();
 590     var point = this.layout.points[0];
 591     var pointSize = this.dygraph_.attr_("pointSize");
 592     var prevX = null, prevY = null;
 593     var drawPoints = this.dygraph_.attr_("drawPoints");
 594     var points = this.layout.points;
 595     for (var j = 0; j < points.length; j++) {
 596       var point = points[j];
 597       if (point.name == setName) {
 598         if (!isOK(point.canvasy)) {
 599           // this will make us move to the next point, not draw a line to it.
 600           prevX = prevY = null;
 601         } else {
 602           // A point is "isolated" if it is non-null but both the previous
 603           // and next points are null.
 604           var isIsolated = (!prevX && (j == points.length - 1 ||
 605                                        !isOK(points[j+1].canvasy)));
 606
 607           if (!prevX) {
 608             prevX = point.canvasx;
 609             prevY = point.canvasy;
 610           } else {
 611             ctx.beginPath();
 612             ctx.strokeStyle = color;
 613             ctx.lineWidth = this.options.strokeWidth;
 614             ctx.moveTo(prevX, prevY);
 615             prevX = point.canvasx;
 616             prevY = point.canvasy;
 617             ctx.lineTo(prevX, prevY);
 618             ctx.stroke();
 619           }
 620
 621           if (drawPoints || isIsolated) {
 622            ctx.beginPath();
 623            ctx.fillStyle = color;
 624            ctx.arc(point.canvasx, point.canvasy, pointSize,
 625                    0, 2 * Math.PI, false);
 626            ctx.fill();
 627           }
 628         }
 629       }
 630     }
 631   }
 632
 633   context.restore();
 634 };