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