Initial check-in

Author: danvk

data.js

@@ -0,0 +1,63 @@
+function StubbedData() {
+return "" +
+"Date,A,B\n" +
+"20061001,3.01953818828,0.7212041046,2.18487394958,0.599318549691\n" +
+"20061002,3.63321799308,0.778297234566,1.69491525424,0.531417655826\n" +
+"20061003,2.44328097731,0.644967734352,2.51256281407,0.640539070386\n" +
+"20061004,3.52733686067,0.774700921683,2.68456375839,0.66207105053\n" +
+"20061005,3.28719723183,0.741636245748,2.35294117647,0.621407707226\n" +
+"20061006,1.58450704225,0.523967868159,3.78657487091,0.791868460623\n" +
+"20061007,5.32859680284,0.946589405904,4.0404040404,0.807910739509\n" +
+"20061008,2.64084507042,0.672799548916,2.37288135593,0.626609885481\n" +
+"20061009,2.26480836237,0.620990945917,3.5413153457,0.75897176848\n" +
+"20061010,3.29289428076,0.74289969528,2.02702702703,0.579191340004\n" +
+"20061011,2.7633851468,0.681234043829,1.1744966443,0.4413034044\n" +
+"20061012,3.28719723183,0.741636245748,3.37268128162,0.741327769578\n" +
+"20061013,1.77304964539,0.55569466381,1.85810810811,0.555011329732\n" +
+"20061014,3.39892665474,0.7664008338,1.67224080268,0.524368852929\n" +
+"20061015,2.65017667845,0.675144574777,3.35570469799,0.737661045752\n" +
+"20061016,3.63951473137,0.779620631266,2.34899328859,0.620377617453\n" +
+"20061017,2.25694444444,0.618859623032,1.68067226891,0.526990133716\n" +
+"20061018,4.47504302926,0.857766274964,2.51677852349,0.641599927369\n" +
+"20061019,2.44755244755,0.646081155692,1.68067226891,0.526990133716\n" +
+"20061020,3.67775831874,0.787656442774,3.066439523,0.711598843969\n" +
+"20061021,3.94265232975,0.823839169829,3.85906040268,0.788990618726\n" +
+"20061022,2.59067357513,0.660187558973,3.71621621622,0.777438794254\n" +
+"20061023,4.33275563258,0.847570482324,3.85906040268,0.788990618726\n" +
+"20061024,3.10344827586,0.720049610821,2.84280936455,0.679611549697\n" +
+"20061025,1.40350877193,0.492720767725,2.7027027027,0.666482380968\n" +
+"20061026,1.95035460993,0.582291234145,2.36486486486,0.624518599275\n" +
+"20061027,2.30905861456,0.632980642182,2.03045685279,0.580161203819\n" +
+"20061028,4.09252669039,0.835706590809,2.87648054146,0.68754192469\n" +
+"20061029,2.66903914591,0.679883997626,2.02360876897,0.578224712918\n" +
+"20061030,4.74516695958,0.89127787497,4.36241610738,0.836670992529\n" +
+"20061031,2.78260869565,0.685905251933,3.20945945946,0.724388507178\n" +
+"20061101,1.5873015873,0.524884521441,1.51260504202,0.500373860545\n" +
+"20061102,2.78745644599,0.687083077461,2.0202020202,0.57726130639\n" +
+"20061103,5.11463844797,0.925157232782,2.68907563025,0.663168401088\n" +
+"20061104,4.9001814882,0.919644816432,3.07692307692,0.713993047527\n" +
+"20061105,5.13274336283,0.928343545136,3.55329949239,0.761492892041\n" +
+"20061106,1.92644483363,0.575222935029,2.35294117647,0.621407707226\n" +
+"20061107,2.46478873239,0.650573541306,1.52027027027,0.502889967904\n" +
+"20061108,2.13523131673,0.609772022763,2.6981450253,0.665374048085\n" +
+"20061109,3.88007054674,0.811026422222,2.72572402044,0.672079879106\n" +
+"20061110,2.63620386643,0.671633132526,3.71621621622,0.777438794254\n" +
+"20061111,3.69718309859,0.791736755355,3.0303030303,0.703344064467\n" +
+"20061112,3.83944153578,0.802703592906,4.05405405405,0.81058250986\n" +
+"20061113,2.47787610619,0.653984033555,2.20338983051,0.604340313133\n" +
+"20061114,1.77304964539,0.55569466381,2.22222222222,0.60944692682\n" +
+"20061115,2.30088495575,0.630766388737,0.843170320405,0.375484163785\n" +
+"20061116,1.57894736842,0.522144132232,2.19594594595,0.602321544724\n" +
+"20061118,2.45183887916,0.647198426991,1.69491525424,0.531417655826\n" +
+"20061119,3.52733686067,0.774700921683,1.85185185185,0.55316023504\n" +
+"20061120,2.97723292469,0.711254751484,2.6981450253,0.665374048085\n" +
+"20061121,2.29681978799,0.629665059963,2.01680672269,0.576301104352\n" +
+"20061122,3.01418439716,0.719945245328,2.5466893039,0.649125445325\n" +
+"20061123,3.78378378378,0.809917534069,2.6936026936,0.664269394219\n" +
+"20061124,3.18584070796,0.738851643987,2.01005025126,0.57439025002\n" +
+"20061125,2.83185840708,0.697868332879,3.066439523,0.711598843969\n" +
+"20061126,3.01953818828,0.7212041046,2.53378378378,0.645878720149\n" +
+"20061127,2.81195079086,0.693033387099,1.51006711409,0.499540743312\n" +
+"20061128,2.97723292469,0.711254751484,2.54237288136,0.648039583782\n" +
+"20061129,1.41093474427,0.495309102312,3.02013422819,0.701020603129";
+}

dygraph-canvas.js

@@ -0,0 +1,230 @@
+// Copyright 2006 Dan Vanderkam ([email protected])
+// All Rights Reserved.
+
+/**
+ * @fileoverview Subclasses various parts of PlotKit to meet the additional
+ * needs of DateGraph: grid overlays and error bars
+ */
+
+// Subclass PlotKit.Layout to add:
+// 1. Sigma/errorBars properties
+// 2. Copy error terms for PlotKit.CanvasRenderer._renderLineChart
+
+/**
+ * Creates a new DateGraphLayout object. Options are the same as those allowed
+ * by the PlotKit.Layout constructor.
+ * @param {Object} options Options for PlotKit.Layout
+ * @return {Object} The DateGraphLayout object
+ */
+DateGraphLayout = function(options) {
+  PlotKit.Layout.call(this, "line", options);
+};
+DateGraphLayout.prototype = new PlotKit.Layout();
+
+/**
+ * Behaves the same way as PlotKit.Layout, but also copies the errors
+ * @private
+ */
+DateGraphLayout.prototype.evaluateWithError = function() {
+  this.evaluate();
+  if (!this.options.errorBars) return;
+
+  // Copy over the error terms
+  var i = 0; // index in this.points
+  for (var setName in this.datasets) {
+    var j = 0;
+    var dataset = this.datasets[setName];
+    if (PlotKit.Base.isFuncLike(dataset)) continue;
+    for (var j = 0; j < dataset.length; j++, i++) {
+      var item = dataset[j];
+      var xv = parseFloat(item[0]);
+      var yv = parseFloat(item[1]);
+
+      if (xv == this.points[i].xval &&
+          yv == this.points[i].yval) {
+        this.points[i].errorMinus = parseFloat(item[2]);
+        this.points[i].errorPlus = parseFloat(item[3]);
+      }
+    }
+  }
+};
+
+/**
+ * Convenience function to remove all the data sets from a graph
+ */
+DateGraphLayout.prototype.removeAllDatasets = function() {
+  delete this.datasets;
+  this.datasets = new Array();
+};
+
+/**
+ * Change the values of various layout options
+ * @param {Object} new_options an associative array of new properties
+ */
+DateGraphLayout.prototype.updateOptions = function(new_options) {
+  MochiKit.Base.update(this.options, new_options ? new_options : {});
+};
+
+// Subclass PlotKit.CanvasRenderer to add:
+// 1. X/Y grid overlay
+// 2. Ability to draw error bars (if required)
+
+/**
+ * Sets some PlotKit.CanvasRenderer options
+ * @param {Object} element The canvas to attach to
+ * @param {Layout} layout The DateGraphLayout object for this graph.
+ * @param {Object} options Options to pass on to CanvasRenderer
+ */
+DateGraphCanvasRenderer = function(element, layout, options) {
+  PlotKit.CanvasRenderer.call(this, element, layout, options);
+  this.options.shouldFill = false;
+  this.options.shouldStroke = true;
+  this.options.drawYGrid = true;
+  this.options.drawXGrid = true;
+  this.options.gridLineColor = MochiKit.Color.Color.grayColor();
+  MochiKit.Base.update(this.options, options);
+
+  // TODO(danvk) This shouldn't be necessary: effects should be overlaid
+  this.options.drawBackground = false;
+};
+DateGraphCanvasRenderer.prototype = new PlotKit.CanvasRenderer();
+
+/**
+ * Draw an X/Y grid on top of the existing plot
+ */
+DateGraphCanvasRenderer.prototype.render = function() {
+  // Do the ordinary rendering, as before
+  // TODO(danvk) Call super.render()
+  this._renderLineChart();
+  this._renderLineAxis();
+
+  // Draw the new X/Y grid
+  var ctx = this.element.getContext("2d");
+  if (this.options.drawYGrid) {
+    var ticks = this.layout.yticks;
+    ctx.save();
+    ctx.strokeStyle = this.options.gridLineColor.toRGBString();
+    ctx.lineWidth = this.options.axisLineWidth;
+    for (var i = 0; i < ticks.length; i++) {
+      var x = this.area.x;
+      var y = this.area.y + ticks[i][0] * this.area.h;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + this.area.w, y);
+      ctx.closePath();
+      ctx.stroke();
+    }
+  }
+
+  if (this.options.drawXGrid) {
+    var ticks = this.layout.xticks;
+    ctx.save();
+    ctx.strokeStyle = this.options.gridLineColor.toRGBString();
+    ctx.lineWidth = this.options.axisLineWidth;
+    for (var i=0; i<ticks.length; i++) {
+      var x = this.area.x + ticks[i][0] * this.area.w;
+      var y = this.area.y + this.area.h;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x, this.area.y);
+      ctx.closePath();
+      ctx.stroke();
+    }
+  }
+};
+
+/**
+ * Overrides the CanvasRenderer method to draw error bars
+ */
+DateGraphCanvasRenderer.prototype._renderLineChart = function() {
+  var context = this.element.getContext("2d");
+  var colorCount = this.options.colorScheme.length;
+  var colorScheme = this.options.colorScheme;
+  var setNames = MochiKit.Base.keys(this.layout.datasets);
+  var errorBars = this.layout.options.errorBars;
+  var setCount = setNames.length;
+  var bind = MochiKit.Base.bind;
+  var partial = MochiKit.Base.partial;
+
+  //Update Points
+  var updatePoint = function(point) {
+    point.canvasx = this.area.w * point.x + this.area.x;
+    point.canvasy = this.area.h * point.y + this.area.y;
+  }
+  MochiKit.Iter.forEach(this.layout.points, updatePoint, this);
+
+  // create paths
+  var makePath = function(ctx) {
+    for (var i = 0; i < setCount; i++) {
+      var setName = setNames[i];
+      var color = colorScheme[i%colorCount];
+      var strokeX = this.options.strokeColorTransform;
+
+      // setup graphics context
+      context.save();
+      context.strokeStyle = color.toRGBString();
+      context.lineWidth = this.options.strokeWidth;
+      ctx.beginPath();
+      var point = this.layout.points[0];
+      var first_point = true;
+      var addPoint = function(ctx_, point) {
+        if (point.name == setName) {
+          if (first_point)
+            ctx_.moveTo(point.canvasx, point.canvasy);
+          else
+            ctx_.lineTo(point.canvasx, point.canvasy);
+          first_point = false;
+        }
+      };
+      MochiKit.Iter.forEach(this.layout.points, partial(addPoint, ctx), this);
+      ctx.stroke();
+    }
+  };
+
+  var makeErrorBars = function(ctx) {
+    for (var i = 0; i < setCount; i++) {
+      var setName = setNames[i];
+      var color = colorScheme[i % colorCount];
+      var strokeX = this.options.strokeColorTransform;
+
+      // setup graphics context
+      context.save();
+      context.strokeStyle = color.toRGBString();
+      context.lineWidth = this.options.strokeWidth;
+      var prevX = -1;
+      var prevYs = [-1, -1];
+      var count = 0;
+      var yscale = this.layout.yscale;
+      var errorTrapezoid = function(ctx_,point) {
+        count++;
+        if (point.name == setName) {
+          var newYs = [ point.y - point.errorPlus * yscale,
+                        point.y + point.errorMinus * yscale ];
+          newYs[0] = this.area.h * newYs[0] + this.area.y;
+          newYs[1] = this.area.h * newYs[1] + this.area.y;
+          if (prevX >= 0) {
+            ctx_.moveTo(prevX, prevYs[0]);
+            ctx_.lineTo(point.canvasx, newYs[0]);
+            ctx_.lineTo(point.canvasx, newYs[1]);
+            ctx_.lineTo(prevX, prevYs[1]);
+            ctx_.closePath();
+          }
+          prevYs[0] = newYs[0];
+          prevYs[1] = newYs[1];
+          prevX = point.canvasx;
+        }
+      };
+      // should be same color as the lines
+      var err_color = color.colorWithAlpha(0.15);
+      ctx.fillStyle = err_color.toRGBString();
+      ctx.beginPath();
+      MochiKit.Iter.forEach(this.layout.points, partial(errorTrapezoid, ctx), this);
+      ctx.fill();
+    }
+  };
+
+  if (errorBars)
+    bind(makeErrorBars, this)(context);
+  bind(makePath, this)(context);
+  context.restore();
+};