X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=6cbe102709aadcf669da51761866dbcacdd60b4b;hb=9f6db80e6619a74aad92c42073a3c49d3dd63cb6;hp=8c44f56a2ec9a694f1a329c158ced45b3f5d71c1;hpb=e6f7144ae5645d533c3e0344424def9ed79036b7;p=dygraphs.git

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 8c44f56..6cbe102 100644
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -62,9 +62,6 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
       throw "Canvas is not supported.";
 
   // internal state
-  this.xlabels = [];
-  this.ylabels = [];
-
   this.area = layout.getPlotArea();
   this.container.style.position = "relative";
   this.container.style.width = this.width + "px";
@@ -121,19 +118,6 @@ DygraphCanvasRenderer.prototype.clear = function() {
 
   context = this.elementContext;
   context.clearRect(0, 0, this.width, this.height);
-
-  function removeArray(ary) {
-    for (var i = 0; i < ary.length; i++) {
-      var el = ary[i];
-      if (el.parentNode) el.parentNode.removeChild(el);
-    }
-  }
-
-  removeArray(this.xlabels);
-  removeArray(this.ylabels);
-
-  this.xlabels = [];
-  this.ylabels = [];
 };
 
 /**
@@ -161,14 +145,6 @@ DygraphCanvasRenderer.isSupported = function(canvasName) {
 };
 
 /**
- * @param { [String] } colors Array of color strings. Should have one entry for
- * each series to be rendered.
- */
-DygraphCanvasRenderer.prototype.setColors = function(colors) {
-  this.colorScheme_ = colors;
-};
-
-/**
  * This method is responsible for drawing everything on the chart, including
  * lines, error bars, fills and axes.
  * It is called immediately after clear() on every frame, including during pans
@@ -176,59 +152,7 @@ DygraphCanvasRenderer.prototype.setColors = function(colors) {
  * @private
  */
 DygraphCanvasRenderer.prototype.render = function() {
-  // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
-  // half-integers. This prevents them from drawing in two rows/cols.
-  var ctx = this.elementContext;
-  function halfUp(x)  { return Math.round(x) + 0.5; }
-  function halfDown(y){ return Math.round(y) - 0.5; }
-
-  if (this.attr_('underlayCallback')) {
-    // NOTE: we pass the dygraph object to this callback twice to avoid breaking
-    // users who expect a deprecated form of this callback.
-    this.attr_('underlayCallback')(ctx, this.area, this.dygraph_, this.dygraph_);
-  }
-
-  var x, y, i, ticks;
-  if (this.attr_('drawYGrid')) {
-    ticks = this.layout.yticks;
-    // TODO(konigsberg): I don't think these calls to save() have a corresponding restore().
-    ctx.save();
-    ctx.strokeStyle = this.attr_('gridLineColor');
-    ctx.lineWidth = this.attr_('gridLineWidth');
-    for (i = 0; i < ticks.length; i++) {
-      // TODO(danvk): allow secondary axes to draw a grid, too.
-      if (ticks[i][0] !== 0) continue;
-      x = halfUp(this.area.x);
-      y = halfDown(this.area.y + ticks[i][1] * this.area.h);
-      ctx.beginPath();
-      ctx.moveTo(x, y);
-      ctx.lineTo(x + this.area.w, y);
-      ctx.closePath();
-      ctx.stroke();
-    }
-    ctx.restore();
-  }
-
-  if (this.attr_('drawXGrid')) {
-    ticks = this.layout.xticks;
-    ctx.save();
-    ctx.strokeStyle = this.attr_('gridLineColor');
-    ctx.lineWidth = this.attr_('gridLineWidth');
-    for (i=0; i<ticks.length; i++) {
-      x = halfUp(this.area.x + ticks[i][0] * this.area.w);
-      y = halfDown(this.area.y + this.area.h);
-      ctx.beginPath();
-      ctx.moveTo(x, y);
-      ctx.lineTo(x, this.area.y);
-      ctx.closePath();
-      ctx.stroke();
-    }
-    ctx.restore();
-  }
-
-  // Do the ordinary rendering, as before
   this._renderLineChart();
-  this._renderAxis();
 };
 
 DygraphCanvasRenderer.prototype._createIEClipArea = function() {
@@ -300,185 +224,6 @@ DygraphCanvasRenderer.prototype._createIEClipArea = function() {
   });
 };
 
-DygraphCanvasRenderer.prototype._renderAxis = function() {
-  if (!this.attr_('drawXAxis') && !this.attr_('drawYAxis')) return;
-
-  // Round pixels to half-integer boundaries for crisper drawing.
-  function halfUp(x)  { return Math.round(x) + 0.5; }
-  function halfDown(y){ return Math.round(y) - 0.5; }
-
-  var context = this.elementContext;
-
-  var label, x, y, tick, i;
-
-  var labelStyle = {
-    position: "absolute",
-    fontSize: this.attr_('axisLabelFontSize') + "px",
-    zIndex: 10,
-    color: this.attr_('axisLabelColor'),
-    width: this.attr_('axisLabelWidth') + "px",
-    // height: this.attr_('axisLabelFontSize') + 2 + "px",
-    lineHeight: "normal",  // Something other than "normal" line-height screws up label positioning.
-    overflow: "hidden"
-  };
-  var makeDiv = function(txt, axis, prec_axis) {
-    var div = document.createElement("div");
-    for (var name in labelStyle) {
-      if (labelStyle.hasOwnProperty(name)) {
-        div.style[name] = labelStyle[name];
-      }
-    }
-    var inner_div = document.createElement("div");
-    inner_div.className = 'dygraph-axis-label' +
-                          ' dygraph-axis-label-' + axis +
-                          (prec_axis ? ' dygraph-axis-label-' + prec_axis : '');
-    inner_div.innerHTML=txt;
-    div.appendChild(inner_div);
-    return div;
-  };
-
-  // axis lines
-  context.save();
-  context.strokeStyle = this.attr_('axisLineColor');
-  context.lineWidth = this.attr_('axisLineWidth');
-
-  if (this.attr_('drawYAxis')) {
-    if (this.layout.yticks && this.layout.yticks.length > 0) {
-      var num_axes = this.dygraph_.numAxes();
-      for (i = 0; i < this.layout.yticks.length; i++) {
-        tick = this.layout.yticks[i];
-        if (typeof(tick) == "function") return;
-        x = this.area.x;
-        var sgn = 1;
-        var prec_axis = 'y1';
-        if (tick[0] == 1) {  // right-side y-axis
-          x = this.area.x + this.area.w;
-          sgn = -1;
-          prec_axis = 'y2';
-        }
-        y = this.area.y + tick[1] * this.area.h;
-
-        /* Tick marks are currently clipped, so don't bother drawing them.
-        context.beginPath();
-        context.moveTo(halfUp(x), halfDown(y));
-        context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
-        context.closePath();
-        context.stroke();
-        */
-
-        label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
-        var top = (y - this.attr_('axisLabelFontSize') / 2);
-        if (top < 0) top = 0;
-
-        if (top + this.attr_('axisLabelFontSize') + 3 > this.height) {
-          label.style.bottom = "0px";
-        } else {
-          label.style.top = top + "px";
-        }
-        if (tick[0] === 0) {
-          label.style.left = (this.area.x - this.attr_('yAxisLabelWidth') - this.attr_('axisTickSize')) + "px";
-          label.style.textAlign = "right";
-        } else if (tick[0] == 1) {
-          label.style.left = (this.area.x + this.area.w +
-                              this.attr_('axisTickSize')) + "px";
-          label.style.textAlign = "left";
-        }
-        label.style.width = this.attr_('yAxisLabelWidth') + "px";
-        this.container.appendChild(label);
-        this.ylabels.push(label);
-      }
-
-      // The lowest tick on the y-axis often overlaps with the leftmost
-      // tick on the x-axis. Shift the bottom tick up a little bit to
-      // compensate if necessary.
-      var bottomTick = this.ylabels[0];
-      var fontSize = this.attr_('axisLabelFontSize');
-      var bottom = parseInt(bottomTick.style.top, 10) + fontSize;
-      if (bottom > this.height - fontSize) {
-        bottomTick.style.top = (parseInt(bottomTick.style.top, 10) -
-            fontSize / 2) + "px";
-      }
-    }
-
-    // draw a vertical line on the left to separate the chart from the labels.
-    var axisX;
-    if (this.attr_('drawAxesAtZero')) {
-      var r = this.dygraph_.toPercentXCoord(0);
-      if (r > 1 || r < 0) r = 0;
-      axisX = halfUp(this.area.x + r * this.area.w);
-    } else {
-      axisX = halfUp(this.area.x);
-    }
-    context.beginPath();
-    context.moveTo(axisX, halfDown(this.area.y));
-    context.lineTo(axisX, halfDown(this.area.y + this.area.h));
-    context.closePath();
-    context.stroke();
-
-    // if there's a secondary y-axis, draw a vertical line for that, too.
-    if (this.dygraph_.numAxes() == 2) {
-      context.beginPath();
-      context.moveTo(halfDown(this.area.x + this.area.w), halfDown(this.area.y));
-      context.lineTo(halfDown(this.area.x + this.area.w), halfDown(this.area.y + this.area.h));
-      context.closePath();
-      context.stroke();
-    }
-  }
-
-  if (this.attr_('drawXAxis')) {
-    if (this.layout.xticks) {
-      for (i = 0; i < this.layout.xticks.length; i++) {
-        tick = this.layout.xticks[i];
-        x = this.area.x + tick[0] * this.area.w;
-        y = this.area.y + this.area.h;
-
-        /* Tick marks are currently clipped, so don't bother drawing them.
-        context.beginPath();
-        context.moveTo(halfUp(x), halfDown(y));
-        context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
-        context.closePath();
-        context.stroke();
-        */
-
-        label = makeDiv(tick[1], 'x');
-        label.style.textAlign = "center";
-        label.style.top = (y + this.attr_('axisTickSize')) + 'px';
-
-        var left = (x - this.attr_('axisLabelWidth')/2);
-        if (left + this.attr_('axisLabelWidth') > this.width) {
-          left = this.width - this.attr_('xAxisLabelWidth');
-          label.style.textAlign = "right";
-        }
-        if (left < 0) {
-          left = 0;
-          label.style.textAlign = "left";
-        }
-
-        label.style.left = left + "px";
-        label.style.width = this.attr_('xAxisLabelWidth') + "px";
-        this.container.appendChild(label);
-        this.xlabels.push(label);
-      }
-    }
-
-    context.beginPath();
-    var axisY;
-    if (this.attr_('drawAxesAtZero')) {
-      var r = this.dygraph_.toPercentYCoord(0, 0);
-      if (r > 1 || r < 0) r = 1;
-      axisY = halfDown(this.area.y + r * this.area.h);
-    } else {
-      axisY = halfDown(this.area.y + this.area.h);
-    }
-    context.moveTo(halfUp(this.area.x), axisY);
-    context.lineTo(halfUp(this.area.x + this.area.w), axisY);
-    context.closePath();
-    context.stroke();
-  }
-
-  context.restore();
-};
-
 
 /**
  * Returns a predicate to be used with an iterator, which will
@@ -487,12 +232,18 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
  * skip over points with missing yVals.
  */
 DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) {
-  return connectSeparatedPoints ? DygraphCanvasRenderer._predicateThatSkipsEmptyPoints : null;
+  return connectSeparatedPoints
+      ? DygraphCanvasRenderer._predicateThatSkipsEmptyPoints
+      : null;
 }
 
 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints =
   function(array, idx) { return array[idx].yval !== null; }
 
+/**
+ *
+ * @private
+ */
 DygraphCanvasRenderer.prototype._drawStyledLine = function(
     ctx, i, setName, color, strokeWidth, strokePattern, drawPoints,
     drawPointCallback, pointSize) {
@@ -509,7 +260,8 @@ DygraphCanvasRenderer.prototype._drawStyledLine = function(
   ctx.save();
 
   var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
-      DygraphCanvasRenderer._getIteratorPredicate(this.attr_("connectSeparatedPoints")));
+      DygraphCanvasRenderer._getIteratorPredicate(
+          this.attr_("connectSeparatedPoints")));
 
   var pointsOnLine;
   var strategy;
@@ -594,7 +346,7 @@ DygraphCanvasRenderer.prototype._drawSeries = function(
 
   strategy.init();
 
-  while(iter.hasNext()) {
+  while(iter.hasNext) {
     point = iter.next();
     if (point.canvasy === null || point.canvasy != point.canvasy) {
       if (stepPlot && prevCanvasX !== null) {
@@ -605,16 +357,16 @@ DygraphCanvasRenderer.prototype._drawSeries = function(
       }
       prevCanvasX = prevCanvasY = null;
     } else {
-      nextCanvasY = iter.hasNext() ? iter.peek().canvasy : null;
-      // TODO: we calculate isNullOrNaN for this point, and the next, and then, when
-      // we iterate, test for isNullOrNaN again. Why bother?
+      nextCanvasY = iter.hasNext ? iter.peek.canvasy : null;
+      // TODO: we calculate isNullOrNaN for this point, and the next, and then,
+      // when we iterate, test for isNullOrNaN again. Why bother?
       var isNextCanvasYNullOrNaN = nextCanvasY === null || nextCanvasY != nextCanvasY;
       isIsolated = (!prevCanvasX && isNextCanvasYNullOrNaN);
       if (drawGapPoints) {
         // Also consider a point to be "isolated" if it's adjacent to a
         // null point, excluding the graph edges.
         if ((!first && !prevCanvasX) ||
-            (iter.hasNext() && isNextCanvasYNullOrNaN)) {
+            (iter.hasNext && isNextCanvasYNullOrNaN)) {
           isIsolated = true;
         }
       }
@@ -674,20 +426,13 @@ DygraphCanvasRenderer.prototype._drawLine = function(ctx, i) {
 
 /**
  * Actually draw the lines chart, including error bars.
- * TODO(danvk): split this into several smaller functions.
  * @private
  */
 DygraphCanvasRenderer.prototype._renderLineChart = function() {
-  // TODO(danvk): use this.attr_ for many of these.
   var ctx = this.elementContext;
-  var fillAlpha = this.attr_('fillAlpha');
   var errorBars = this.attr_("errorBars") || this.attr_("customBars");
   var fillGraph = this.attr_("fillGraph");
-  var stackedGraph = this.attr_("stackedGraph");
-  var stepPlot = this.attr_("stepPlot");
-  var points = this.layout.points;
-  var pointsLength = points.length;
-  var point, i, prevX, prevY, prevYs, color, setName, newYs, err_color, rgb, yscale, axis;
+  var i;
 
   var setNames = this.layout.setNames;
   var setCount = setNames.length;
@@ -700,177 +445,219 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
   // TODO(bhs): this loop is a hot-spot for high-point-count charts. These
   // transformations can be pushed into the canvas via linear transformation
   // matrices.
-  for (i = pointsLength; i--;) {
-    point = points[i];
+  var points = this.layout.points;
+  for (i = points.length; i--;) {
+    var point = points[i];
     point.canvasx = this.area.w * point.x + this.area.x;
     point.canvasy = this.area.h * point.y + this.area.y;
   }
 
-  // create paths
+  // Draw any "fills", i.e. error bars or the filled area under a series.
+  // These must all be drawn before any lines, so that the main lines of a
+  // series are drawn on top.
   if (errorBars) {
-    ctx.save();
     if (fillGraph) {
       this.dygraph_.warn("Can't use fillGraph option with error bars");
     }
 
-    for (i = 0; i < setCount; i++) {
-      setName = setNames[i];
-      axis = this.dygraph_.axisPropertiesForSeries(setName);
-      color = this.colors[setName];
-
-      var firstIndexInSet = this.layout.setPointsOffsets[i];
-      var setLength = this.layout.setPointsLengths[i];
-
-      var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
-          DygraphCanvasRenderer._getIteratorPredicate(this.attr_("connectSeparatedPoints")));
-
-      // setup graphics context
-      prevX = NaN;
-      prevY = NaN;
-      prevYs = [-1, -1];
-      yscale = axis.yscale;
-      // should be same color as the lines but only 15% opaque.
-      rgb = new RGBColor(color);
-      err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
-                            fillAlpha + ')';
-      ctx.fillStyle = err_color;
-      ctx.beginPath();
-      while (iter.hasNext()) {
-        point = iter.next();
-        if (point.name == setName) { // TODO(klausw): this is always true
-          if (!Dygraph.isOK(point.y)) {
-            prevX = NaN;
-            continue;
-          }
+    ctx.save();
+    this.drawErrorBars_(points);
+    ctx.restore();
+  } else if (fillGraph) {
+    ctx.save();
+    this.drawFillBars_(points);
+    ctx.restore();
+  }
+
+  // Drawing the lines.
+  for (i = 0; i < setCount; i += 1) {
+    this._drawLine(ctx, i);
+  }
+};
+
+/**
+ * Draws the shaded error bars/confidence intervals for each series.
+ * This happens before the center lines are drawn, since the center lines
+ * need to be drawn on top of the error bars for all series.
+ *
+ * @private
+ */
+DygraphCanvasRenderer.prototype.drawErrorBars_ = function(points) {
+  var ctx = this.elementContext;
+  var setNames = this.layout.setNames;
+  var setCount = setNames.length;
+  var fillAlpha = this.attr_('fillAlpha');
+  var stepPlot = this.attr_('stepPlot');
+
+  var newYs;
+
+  for (var i = 0; i < setCount; i++) {
+    var setName = setNames[i];
+    var axis = this.dygraph_.axisPropertiesForSeries(setName);
+    var color = this.colors[setName];
+
+    var firstIndexInSet = this.layout.setPointsOffsets[i];
+    var setLength = this.layout.setPointsLengths[i];
+
+    var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
+        DygraphCanvasRenderer._getIteratorPredicate(
+            this.attr_("connectSeparatedPoints")));
+
+    // setup graphics context
+    var prevX = NaN;
+    var prevY = NaN;
+    var prevYs = [-1, -1];
+    var yscale = axis.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 + ',' + fillAlpha + ')';
+    ctx.fillStyle = err_color;
+    ctx.beginPath();
+    while (iter.hasNext) {
+      var point = iter.next();
+      if (point.name == setName) { // TODO(klausw): this is always true
+        if (!Dygraph.isOK(point.y)) {
+          prevX = NaN;
+          continue;
+        }
 
-          // TODO(danvk): here
+        // TODO(danvk): here
+        if (stepPlot) {
+          newYs = [ point.y_bottom, point.y_top ];
+          prevY = point.y;
+        } else {
+          newYs = [ point.y_bottom, point.y_top ];
+        }
+        newYs[0] = this.area.h * newYs[0] + this.area.y;
+        newYs[1] = this.area.h * newYs[1] + this.area.y;
+        if (!isNaN(prevX)) {
           if (stepPlot) {
-            newYs = [ point.y_bottom, point.y_top ];
-            prevY = point.y;
+            ctx.moveTo(prevX, newYs[0]);
           } else {
-            newYs = [ point.y_bottom, point.y_top ];
+            ctx.moveTo(prevX, prevYs[0]);
           }
-          newYs[0] = this.area.h * newYs[0] + this.area.y;
-          newYs[1] = this.area.h * newYs[1] + this.area.y;
-          if (!isNaN(prevX)) {
-            if (stepPlot) {
-              ctx.moveTo(prevX, newYs[0]);
-            } else {
-              ctx.moveTo(prevX, prevYs[0]);
-            }
-            ctx.lineTo(point.canvasx, newYs[0]);
-            ctx.lineTo(point.canvasx, newYs[1]);
-            if (stepPlot) {
-              ctx.lineTo(prevX, newYs[1]);
-            } else {
-              ctx.lineTo(prevX, prevYs[1]);
-            }
-            ctx.closePath();
+          ctx.lineTo(point.canvasx, newYs[0]);
+          ctx.lineTo(point.canvasx, newYs[1]);
+          if (stepPlot) {
+            ctx.lineTo(prevX, newYs[1]);
+          } else {
+            ctx.lineTo(prevX, prevYs[1]);
           }
-          prevYs = newYs;
-          prevX = point.canvasx;
+          ctx.closePath();
         }
+        prevYs = newYs;
+        prevX = point.canvasx;
       }
-      ctx.fill();
     }
-    ctx.restore();
-  } else if (fillGraph) {
-    ctx.save();
-    var baseline = {};  // for stacked graphs: baseline for filling
-    var currBaseline;
-
-    // process sets in reverse order (needed for stacked graphs)
-    for (i = setCount - 1; i >= 0; i--) {
-      setName = setNames[i];
-      color = this.colors[setName];
-      axis = this.dygraph_.axisPropertiesForSeries(setName);
-      var axisY = 1.0 + axis.minyval * axis.yscale;
-      if (axisY < 0.0) axisY = 0.0;
-      else if (axisY > 1.0) axisY = 1.0;
-      axisY = this.area.h * axisY + this.area.y;
-      var firstIndexInSet = this.layout.setPointsOffsets[i];
-      var setLength = this.layout.setPointsLengths[i];
-
-      var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
-          DygraphCanvasRenderer._getIteratorPredicate(this.attr_("connectSeparatedPoints")));
-
-      // setup graphics context
-      prevX = NaN;
-      prevYs = [-1, -1];
-      yscale = axis.yscale;
-      // should be same color as the lines but only 15% opaque.
-      rgb = new RGBColor(color);
-      err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
-                            fillAlpha + ')';
-      ctx.fillStyle = err_color;
-      ctx.beginPath();
-      while(iter.hasNext()) {
-        point = iter.next();
-        if (point.name == setName) { // TODO(klausw): this is always true
-          if (!Dygraph.isOK(point.y)) {
-            prevX = NaN;
-            continue;
-          }
-          if (stackedGraph) {
-            currBaseline = baseline[point.canvasx];
-            var lastY;
-            if (currBaseline === undefined) {
-              lastY = axisY;
-            } else {
-              if(stepPlot) {
-                lastY = currBaseline[0];
-              } else {
-                lastY = currBaseline;
-              }
-            }
-            newYs = [ point.canvasy, lastY ];
+    ctx.fill();
+  }
+};
 
+/**
+ * Draws the shaded regions when "fillGraph" is set. Not to be confused with
+ * error bars.
+ *
+ * @private
+ */
+DygraphCanvasRenderer.prototype.drawFillBars_ = function(points) {
+  var ctx = this.elementContext;
+  var setNames = this.layout.setNames;
+  var setCount = setNames.length;
+  var fillAlpha = this.attr_('fillAlpha');
+  var stepPlot = this.attr_('stepPlot');
+  var stackedGraph = this.attr_("stackedGraph");
+
+  var baseline = {};  // for stacked graphs: baseline for filling
+  var currBaseline;
+
+  // process sets in reverse order (needed for stacked graphs)
+  for (var i = setCount - 1; i >= 0; i--) {
+    var setName = setNames[i];
+    var color = this.colors[setName];
+    var axis = this.dygraph_.axisPropertiesForSeries(setName);
+    var axisY = 1.0 + axis.minyval * axis.yscale;
+    if (axisY < 0.0) axisY = 0.0;
+    else if (axisY > 1.0) axisY = 1.0;
+    axisY = this.area.h * axisY + this.area.y;
+    var firstIndexInSet = this.layout.setPointsOffsets[i];
+    var setLength = this.layout.setPointsLengths[i];
+
+    var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
+        DygraphCanvasRenderer._getIteratorPredicate(
+            this.attr_("connectSeparatedPoints")));
+
+    // setup graphics context
+    var prevX = NaN;
+    var prevYs = [-1, -1];
+    var newYs;
+    var yscale = axis.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 + ',' + fillAlpha + ')';
+    ctx.fillStyle = err_color;
+    ctx.beginPath();
+    while(iter.hasNext) {
+      var point = iter.next();
+      if (point.name == setName) { // TODO(klausw): this is always true
+        if (!Dygraph.isOK(point.y)) {
+          prevX = NaN;
+          continue;
+        }
+        if (stackedGraph) {
+          currBaseline = baseline[point.canvasx];
+          var lastY;
+          if (currBaseline === undefined) {
+            lastY = axisY;
+          } else {
             if(stepPlot) {
-              // Step plots must keep track of the top and bottom of
-              // the baseline at each point.
-              if(prevYs[0] === -1) {
-                baseline[point.canvasx] = [ point.canvasy, axisY ];
-              } else {
-                baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
-              }
+              lastY = currBaseline[0];
             } else {
-              baseline[point.canvasx] = point.canvasy;
+              lastY = currBaseline;
             }
+          }
+          newYs = [ point.canvasy, lastY ];
 
+          if(stepPlot) {
+            // Step plots must keep track of the top and bottom of
+            // the baseline at each point.
+            if(prevYs[0] === -1) {
+              baseline[point.canvasx] = [ point.canvasy, axisY ];
+            } else {
+              baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
+            }
           } else {
-            newYs = [ point.canvasy, axisY ];
+            baseline[point.canvasx] = point.canvasy;
           }
-          if (!isNaN(prevX)) {
-            ctx.moveTo(prevX, prevYs[0]);
 
-            if (stepPlot) {
-              ctx.lineTo(point.canvasx, prevYs[0]);
-              if(currBaseline) {
-                // Draw to the bottom of the baseline
-                ctx.lineTo(point.canvasx, currBaseline[1]);
-              } else {
-                ctx.lineTo(point.canvasx, newYs[1]);
-              }
+        } else {
+          newYs = [ point.canvasy, axisY ];
+        }
+        if (!isNaN(prevX)) {
+          ctx.moveTo(prevX, prevYs[0]);
+
+          if (stepPlot) {
+            ctx.lineTo(point.canvasx, prevYs[0]);
+            if(currBaseline) {
+              // Draw to the bottom of the baseline
+              ctx.lineTo(point.canvasx, currBaseline[1]);
             } else {
-              ctx.lineTo(point.canvasx, newYs[0]);
               ctx.lineTo(point.canvasx, newYs[1]);
             }
-
-            ctx.lineTo(prevX, prevYs[1]);
-            ctx.closePath();
+          } else {
+            ctx.lineTo(point.canvasx, newYs[0]);
+            ctx.lineTo(point.canvasx, newYs[1]);
           }
-          prevYs = newYs;
-          prevX = point.canvasx;
+
+          ctx.lineTo(prevX, prevYs[1]);
+          ctx.closePath();
         }
+        prevYs = newYs;
+        prevX = point.canvasx;
       }
-      ctx.fill();
     }
-    ctx.restore();
-  }
-
-  // Drawing the lines.
-  for (i = 0; i < setCount; i += 1) {
-    this._drawLine(ctx, i);
+    ctx.fill();
   }
 };