Fix typo spotted by Morgan
[dygraphs.git] / dygraph-canvas.js
index d1594f3..8101b03 100644 (file)
@@ -37,13 +37,19 @@ DygraphLayout.prototype.evaluate = function() {
 
 DygraphLayout.prototype._evaluateLimits = function() {
   this.minxval = this.maxxval = null;
-  for (var name in this.datasets) {
-    var series = this.datasets[name];
-    var x1 = series[0][0];
-    if (!this.minxval || x1 < this.minxval) this.minxval = x1;
-
-    var x2 = series[series.length - 1][0];
-    if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2;
+  if (this.options.dateWindow) {
+    this.minxval = this.options.dateWindow[0];
+    this.maxxval = this.options.dateWindow[1];
+  } else {
+    for (var name in this.datasets) {
+      if (!this.datasets.hasOwnProperty(name)) continue;
+      var series = this.datasets[name];
+      var x1 = series[0][0];
+      if (!this.minxval || x1 < this.minxval) this.minxval = x1;
+
+      var x2 = series[series.length - 1][0];
+      if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2;
+    }
   }
   this.xrange = this.maxxval - this.minxval;
   this.xscale = (this.xrange != 0 ? 1/this.xrange : 1.0);
@@ -58,10 +64,13 @@ DygraphLayout.prototype._evaluateLineCharts = function() {
   // add all the rects
   this.points = new Array();
   for (var setName in this.datasets) {
+    if (!this.datasets.hasOwnProperty(setName)) continue;
+
     var dataset = this.datasets[setName];
     for (var j = 0; j < dataset.length; j++) {
       var item = dataset[j];
       var point = {
+        // TODO(danvk): here
         x: ((parseFloat(item[0]) - this.minxval) * this.xscale),
         y: 1.0 - ((parseFloat(item[1]) - this.minyval) * this.yscale),
         xval: parseFloat(item[0]),
@@ -117,6 +126,7 @@ DygraphLayout.prototype.evaluateWithError = function() {
   // Copy over the error terms
   var i = 0; // index in this.points
   for (var setName in this.datasets) {
+    if (!this.datasets.hasOwnProperty(setName)) continue;
     var j = 0;
     var dataset = this.datasets[setName];
     for (var j = 0; j < dataset.length; j++, i++) {
@@ -185,17 +195,6 @@ DygraphCanvasRenderer = function(dygraph, element, layout, options) {
   this.element = element;
   this.container = this.element.parentNode;
 
-  // Stuff relating to Canvas on IE support    
-  this.isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
-
-  if (this.isIE && !isNil(G_vmlCanvasManager)) {
-      this.IEDelay = 0.5;
-      this.maxTries = 5;
-      this.renderDelay = null;
-      this.clearDelay = null;
-      this.element = G_vmlCanvasManager.initElement(this.element);
-  }
-
   this.height = this.element.height;
   this.width = this.element.width;
 
@@ -333,7 +332,9 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
   var makeDiv = function(txt) {
     var div = document.createElement("div");
     for (var name in labelStyle) {
-      div.style[name] = labelStyle[name];
+      if (labelStyle.hasOwnProperty(name)) {
+        div.style[name] = labelStyle[name];
+      }
     }
     div.appendChild(document.createTextNode(txt));
     return div;
@@ -345,7 +346,7 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
   context.lineWidth = this.options.axisLineWidth;
 
   if (this.options.drawYAxis) {
-    if (this.layout.yticks) {
+    if (this.layout.yticks && this.layout.yticks.length > 0) {
       for (var i = 0; i < this.layout.yticks.length; i++) {
         var tick = this.layout.yticks[i];
         if (typeof(tick) == "function") return;
@@ -446,12 +447,18 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
   var colorCount = this.options.colorScheme.length;
   var colorScheme = this.options.colorScheme;
   var errorBars = this.layout.options.errorBars;
+  var fillGraph = this.layout.options.fillGraph;
 
   var setNames = [];
-  for (var name in this.layout.datasets) setNames.push(name);
+  for (var name in this.layout.datasets) {
+    if (this.layout.datasets.hasOwnProperty(name)) {
+      setNames.push(name);
+    }
+  }
   var setCount = setNames.length;
 
-  //Update Points
+  // Update Points
+  // TODO(danvk): here
   for (var i = 0; i < this.layout.points.length; i++) {
     var point = this.layout.points[i];
     point.canvasx = this.area.w * point.x + this.area.x;
@@ -463,6 +470,10 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
 
   var ctx = context;
   if (errorBars) {
+    if (fillGraph) {
+      this.dygraph_.warn("Can't use fillGraph option with error bars");
+    }
+
     for (var i = 0; i < setCount; i++) {
       var setName = setNames[i];
       var color = colorScheme[i % colorCount];
@@ -484,10 +495,11 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
         var point = this.layout.points[j];
         count++;
         if (point.name == setName) {
-          if (!point.y || isNaN(point.y)) {
+          if (!isOK(point.y)) {
             prevX = -1;
             continue;
           }
+          // TODO(danvk): here
           var newYs = [ point.y - point.errorPlus * yscale,
                         point.y + point.errorMinus * yscale ];
           newYs[0] = this.area.h * newYs[0] + this.area.y;
@@ -506,6 +518,55 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
       }
       ctx.fill();
     }
+  } else if (fillGraph) {
+    // TODO(danvk): merge this code with the logic above; they're very similar.
+    for (var i = 0; i < setCount; i++) {
+      var setName = setNames[i];
+      var setNameLast;
+      if (i>0) setNameLast = setNames[i-1];
+      var color = colorScheme[i % colorCount];
+
+      // setup graphics context
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = this.options.strokeWidth;
+      var prevX = -1;
+      var prevYs = [-1, -1];
+      var count = 0;
+      var yscale = this.layout.yscale;
+      // should be same color as the lines but only 15% opaque.
+      var rgb = new RGBColor(color);
+      var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',0.15)';
+      ctx.fillStyle = err_color;
+      ctx.beginPath();
+      for (var j = 0; j < this.layout.points.length; j++) {
+        var point = this.layout.points[j];
+        count++;
+        if (point.name == setName) {
+          if (!isOK(point.y)) {
+            prevX = -1;
+            continue;
+          }
+          var pX = 1.0 + this.layout.minyval * this.layout.yscale;
+          if (pX < 0.0) pX = 0.0;
+          else if (pX > 1.0) pX = 1.0;
+          var newYs = [ point.y, pX ];
+          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;
+        }
+      }
+      ctx.fill();
+    }
   }
 
   for (var i = 0; i < setCount; i++) {
@@ -548,7 +609,8 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
           if (drawPoints || isIsolated) {
            ctx.beginPath();
            ctx.fillStyle = color;
-           ctx.arc(point.canvasx, point.canvasy, pointSize, 0, 360, false);
+           ctx.arc(point.canvasx, point.canvasy, pointSize,
+                   0, 2 * Math.PI, false);
            ctx.fill();
           }
         }