X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=a688c43975958639e973715cdcbc5727b18712c9;hb=0a5aa490041ec62b5c7e4951d4d4e7a2fd345fc2;hp=c79e1b827eff47511b58b14f7d5874812f3d2952;hpb=e2d8db3a5de3343e44e92d087e5cc3d2a56da1a6;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index c79e1b8..a688c43 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -24,8 +24,8 @@ * @constructor */ -/*jshint globalstrict: true */ -/*global Dygraph:false,RGBColor:false */ +var DygraphCanvasRenderer = (function() { +/*global Dygraph:false */ "use strict"; @@ -39,8 +39,8 @@ * The chart canvas has already been created by the Dygraph object. The * renderer simply gets a drawing context. * - * @param {Dyraph} dygraph The chart to which this renderer belongs. - * @param {Canvas} element The <canvas> DOM element on which to draw. + * @param {Dygraph} dygraph The chart to which this renderer belongs. + * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw. * @param {CanvasRenderingContext2D} elementContext The drawing context. * @param {DygraphLayout} layout The chart's DygraphLayout object. * @@ -52,48 +52,33 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { this.layout = layout; this.element = element; this.elementContext = elementContext; - this.container = this.element.parentNode; - this.height = this.element.height; - this.width = this.element.width; + this.height = dygraph.height_; + this.width = dygraph.width_; // --- check whether everything is ok before we return - if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element))) - throw "Canvas is not supported."; + if (!Dygraph.isCanvasSupported(this.element)) { + throw "Canvas is not supported."; + } // internal state this.area = layout.getPlotArea(); - this.container.style.position = "relative"; - this.container.style.width = this.width + "px"; // Set up a clipping area for the canvas (and the interaction canvas). // This ensures that we don't overdraw. - if (this.dygraph_.isUsingExcanvas_) { - this._createIEClipArea(); - } else { - // on Android 3 and 4, setting a clipping area on a canvas prevents it from - // displaying anything. - if (!Dygraph.isAndroid()) { - var ctx = this.dygraph_.canvas_ctx_; - ctx.beginPath(); - ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); - ctx.clip(); - - ctx = this.dygraph_.hidden_ctx_; - ctx.beginPath(); - ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); - ctx.clip(); - } - } -}; + // on Android 3 and 4, setting a clipping area on a canvas prevents it from + // displaying anything. + if (!Dygraph.isAndroid()) { + var ctx = this.dygraph_.canvas_ctx_; + ctx.beginPath(); + ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); + ctx.clip(); -/** - * This just forwards to dygraph.attr_. - * TODO(danvk): remove this? - * @private - */ -DygraphCanvasRenderer.prototype.attr_ = function(name, opt_seriesName) { - return this.dygraph_.attr_(name, opt_seriesName); + ctx = this.dygraph_.hidden_ctx_; + ctx.beginPath(); + ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); + ctx.clip(); + } }; /** @@ -103,50 +88,7 @@ DygraphCanvasRenderer.prototype.attr_ = function(name, opt_seriesName) { * @private */ DygraphCanvasRenderer.prototype.clear = function() { - var context; - if (this.isIE) { - // VML takes a while to start up, so we just poll every this.IEDelay - try { - if (this.clearDelay) { - this.clearDelay.cancel(); - this.clearDelay = null; - } - context = this.elementContext; - } - catch (e) { - // TODO(danvk): this is broken, since MochiKit.Async is gone. - // this.clearDelay = MochiKit.Async.wait(this.IEDelay); - // this.clearDelay.addCallback(bind(this.clear, this)); - return; - } - } - - context = this.elementContext; - context.clearRect(0, 0, this.width, this.height); -}; - -/** - * Checks whether the browser supports the <canvas> tag. - * @private - */ -DygraphCanvasRenderer.isSupported = function(canvasName) { - var canvas = null; - try { - if (typeof(canvasName) == 'undefined' || canvasName === null) { - canvas = document.createElement("canvas"); - } else { - canvas = canvasName; - } - canvas.getContext("2d"); - } - catch (e) { - var ie = navigator.appVersion.match(/MSIE (\d\.\d)/); - var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1); - if ((!ie) || (ie[1] < 6) || (opera)) - return false; - return true; - } - return true; + this.elementContext.clearRect(0, 0, this.width, this.height); }; /** @@ -164,76 +106,6 @@ DygraphCanvasRenderer.prototype.render = function() { this._renderLineChart(); }; -DygraphCanvasRenderer.prototype._createIEClipArea = function() { - var className = 'dygraph-clip-div'; - var graphDiv = this.dygraph_.graphDiv; - - // Remove old clip divs. - for (var i = graphDiv.childNodes.length-1; i >= 0; i--) { - if (graphDiv.childNodes[i].className == className) { - graphDiv.removeChild(graphDiv.childNodes[i]); - } - } - - // Determine background color to give clip divs. - var backgroundColor = document.bgColor; - var element = this.dygraph_.graphDiv; - while (element != document) { - var bgcolor = element.currentStyle.backgroundColor; - if (bgcolor && bgcolor != 'transparent') { - backgroundColor = bgcolor; - break; - } - element = element.parentNode; - } - - function createClipDiv(area) { - if (area.w === 0 || area.h === 0) { - return; - } - var elem = document.createElement('div'); - elem.className = className; - elem.style.backgroundColor = backgroundColor; - elem.style.position = 'absolute'; - elem.style.left = area.x + 'px'; - elem.style.top = area.y + 'px'; - elem.style.width = area.w + 'px'; - elem.style.height = area.h + 'px'; - graphDiv.appendChild(elem); - } - - var plotArea = this.area; - // Left side - createClipDiv({ - x:0, y:0, - w:plotArea.x, - h:this.height - }); - - // Top - createClipDiv({ - x: plotArea.x, y: 0, - w: this.width - plotArea.x, - h: plotArea.y - }); - - // Right side - createClipDiv({ - x: plotArea.x + plotArea.w, y: 0, - w: this.width-plotArea.x - plotArea.w, - h: this.height - }); - - // Bottom - createClipDiv({ - x: plotArea.x, - y: plotArea.y + plotArea.h, - w: this.width - plotArea.x, - h: this.height - plotArea.h - plotArea.y - }); -}; - - /** * Returns a predicate to be used with an iterator, which will * iterate over points appropriately, depending on whether @@ -261,17 +133,19 @@ DygraphCanvasRenderer._drawStyledLine = function(e, drawPointCallback, pointSize) { var g = e.dygraph; // TODO(konigsberg): Compute attributes outside this method call. - var stepPlot = g.getOption("stepPlot"); // TODO(danvk): per-series + var stepPlot = g.getBooleanOption("stepPlot", e.setName); + if (!Dygraph.isArrayLike(strokePattern)) { strokePattern = null; } - var drawGapPoints = g.getOption('drawGapEdgePoints', e.setName); + var drawGapPoints = g.getBooleanOption('drawGapEdgePoints', e.setName); var points = e.points; + var setName = e.setName; var iter = Dygraph.createIterator(points, 0, points.length, DygraphCanvasRenderer._getIteratorPredicate( - g.getOption("connectSeparatedPoints"))); // TODO(danvk): per-series? + g.getBooleanOption("connectSeparatedPoints", setName))); var stroking = strokePattern && (strokePattern.length >= 2); @@ -332,6 +206,9 @@ DygraphCanvasRenderer._drawSeries = function(e, point = arr[i]; } + // FIXME: The 'canvasy != canvasy' test here catches NaN values but the test + // doesn't catch Infinity values. Could change this to + // !isFinite(point.canvasy), but I assume it avoids isNaN for performance? if (point.canvasy === null || point.canvasy != point.canvasy) { if (stepPlot && prevCanvasX !== null) { // Draw a horizontal line to the start of the missing data @@ -343,7 +220,7 @@ DygraphCanvasRenderer._drawSeries = function(e, isIsolated = false; if (drawGapPoints || !prevCanvasX) { iter.nextIdx_ = i; - var peek = iter.next(); + iter.next(); nextCanvasY = iter.hasNext ? iter.peek.canvasy : null; var isNextCanvasYNullOrNaN = nextCanvasY === null || @@ -364,16 +241,15 @@ DygraphCanvasRenderer._drawSeries = function(e, if (stepPlot) { ctx.moveTo(prevCanvasX, prevCanvasY); ctx.lineTo(point.canvasx, prevCanvasY); - prevCanvasX = point.canvasx; } - // TODO(danvk): this moveTo is rarely necessary - ctx.moveTo(prevCanvasX, prevCanvasY); ctx.lineTo(point.canvasx, point.canvasy); } + } else { + ctx.moveTo(point.canvasx, point.canvasy); } if (drawPoints || isIsolated) { - pointsOnLine.push([point.canvasx, point.canvasy]); + pointsOnLine.push([point.canvasx, point.canvasy, point.idx]); } prevCanvasX = point.canvasx; prevCanvasY = point.canvasy; @@ -397,8 +273,8 @@ DygraphCanvasRenderer._drawPointsOnLine = function( for (var idx = 0; idx < pointsOnLine.length; idx++) { var cb = pointsOnLine[idx]; ctx.save(); - drawPointCallback( - e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize); + drawPointCallback.call(e.dygraph, + e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize, cb[2]); ctx.restore(); } }; @@ -433,31 +309,30 @@ DygraphCanvasRenderer.prototype._updatePoints = function() { /** * Add canvas Actually draw the lines chart, including error bars. - * If opt_seriesName is specified, only that series will be drawn. - * (This is used for expedited redrawing with highlightSeriesOpts) - * Lines are typically drawn in the non-interactive dygraph canvas. If opt_ctx - * is specified, they can be drawn elsewhere. * * This function can only be called if DygraphLayout's points array has been * updated with canvas{x,y} attributes, i.e. by * DygraphCanvasRenderer._updatePoints. + * + * @param {string=} opt_seriesName when specified, only that series will + * be drawn. (This is used for expedited redrawing with highlightSeriesOpts) + * @param {CanvasRenderingContext2D} opt_ctx when specified, the drawing + * context. However, lines are typically drawn on the object's + * elementContext. * @private */ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) { var ctx = opt_ctx || this.elementContext; - var errorBars = this.attr_("errorBars") || this.attr_("customBars"); - var fillGraph = this.attr_("fillGraph"); var i; var sets = this.layout.points; var setNames = this.layout.setNames; - var setCount = setNames.length; var setName; this.colors = this.dygraph_.colorsMap_; // Determine which series have specialized plotters. - var plotter_attr = this.attr_("plotter"); + var plotter_attr = this.dygraph_.getOption("plotter"); var plotters = plotter_attr; if (!Dygraph.isArrayLike(plotters)) { plotters = [plotters]; @@ -466,7 +341,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ var setPlotters = {}; // series name -> plotter fn. for (i = 0; i < setNames.length; i++) { setName = setNames[i]; - var setPlotter = this.attr_("plotter", setName); + var setPlotter = this.dygraph_.getOption("plotter", setName); if (setPlotter == plotter_attr) continue; // not specialized. setPlotters[setName] = setPlotter; @@ -510,6 +385,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ plotArea: this.area, seriesIndex: j, seriesCount: sets.length, + singleSeriesName: opt_seriesName, allSeriesPoints: sets }); ctx.restore(); @@ -547,12 +423,12 @@ DygraphCanvasRenderer._linePlotter = function(e) { // TODO(danvk): Check if there's any performance impact of just calling // getOption() inside of _drawStyledLine. Passing in so many parameters makes // this code a bit nasty. - var borderWidth = g.getOption("strokeBorderWidth", setName); + var borderWidth = g.getNumericOption("strokeBorderWidth", setName); var drawPointCallback = g.getOption("drawPointCallback", setName) || Dygraph.Circles.DEFAULT; var strokePattern = g.getOption("strokePattern", setName); - var drawPoints = g.getOption("drawPoints", setName); - var pointSize = g.getOption("pointSize", setName); + var drawPoints = g.getBooleanOption("drawPoints", setName); + var pointSize = g.getNumericOption("pointSize", setName); if (borderWidth && strokeWidth) { DygraphCanvasRenderer._drawStyledLine(e, @@ -584,24 +460,24 @@ DygraphCanvasRenderer._linePlotter = function(e) { DygraphCanvasRenderer._errorPlotter = function(e) { var g = e.dygraph; var setName = e.setName; - var errorBars = g.getOption("errorBars") || g.getOption("customBars"); + var errorBars = g.getBooleanOption("errorBars") || + g.getBooleanOption("customBars"); if (!errorBars) return; - var fillGraph = g.getOption("fillGraph", setName); + var fillGraph = g.getBooleanOption("fillGraph", setName); if (fillGraph) { - g.warn("Can't use fillGraph option with error bars"); + console.warn("Can't use fillGraph option with error bars"); } var ctx = e.drawingContext; var color = e.color; - var fillAlpha = g.getOption('fillAlpha', setName); - var stepPlot = g.getOption('stepPlot'); // TODO(danvk): per-series - var axis = e.axis; + var fillAlpha = g.getNumericOption('fillAlpha', setName); + var stepPlot = g.getBooleanOption("stepPlot", setName); var points = e.points; var iter = Dygraph.createIterator(points, 0, points.length, DygraphCanvasRenderer._getIteratorPredicate( - g.getOption("connectSeparatedPoints"))); + g.getBooleanOption("connectSeparatedPoints", setName))); var newYs; @@ -609,26 +485,37 @@ DygraphCanvasRenderer._errorPlotter = function(e) { 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 rgb = Dygraph.toRGB_(color); var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')'; ctx.fillStyle = err_color; ctx.beginPath(); + + var isNullUndefinedOrNaN = function(x) { + return (x === null || + x === undefined || + isNaN(x)); + }; + while (iter.hasNext) { var point = iter.next(); - if ((!stepPlot && !Dygraph.isOK(point.y)) || (stepPlot && !isNaN(prevY) && !Dygraph.isOK(prevY))) { + if ((!stepPlot && isNullUndefinedOrNaN(point.y)) || + (stepPlot && !isNaN(prevY) && isNullUndefinedOrNaN(prevY))) { prevX = NaN; continue; } + newYs = [ point.y_bottom, point.y_top ]; if (stepPlot) { - newYs = [ point.y_bottom, point.y_top ]; prevY = point.y; - } else { - newYs = [ point.y_bottom, point.y_top ]; } + + // The documentation specifically disallows nulls inside the point arrays, + // but in case it happens we should do something sensible. + if (isNaN(newYs[0])) newYs[0] = point.y; + if (isNaN(newYs[1])) newYs[1] = point.y; + newYs[0] = e.plotArea.h * newYs[0] + e.plotArea.y; newYs[1] = e.plotArea.h * newYs[1] + e.plotArea.y; if (!isNaN(prevX)) { @@ -650,6 +537,127 @@ DygraphCanvasRenderer._errorPlotter = function(e) { ctx.fill(); }; + +/** + * Proxy for CanvasRenderingContext2D which drops moveTo/lineTo calls which are + * superfluous. It accumulates all movements which haven't changed the x-value + * and only applies the two with the most extreme y-values. + * + * Calls to lineTo/moveTo must have non-decreasing x-values. + */ +DygraphCanvasRenderer._fastCanvasProxy = function(context) { + var pendingActions = []; // array of [type, x, y] tuples + var lastRoundedX = null; + + var LINE_TO = 1, + MOVE_TO = 2; + + var actionCount = 0; // number of moveTos and lineTos passed to context. + + // Drop superfluous motions + // Assumes all pendingActions have the same (rounded) x-value. + var compressActions = function(opt_losslessOnly) { + if (pendingActions.length <= 1) return; + + // Lossless compression: drop inconsequential moveTos. + for (var i = pendingActions.length - 1; i > 0; i--) { + var action = pendingActions[i]; + if (action[0] == MOVE_TO) { + var prevAction = pendingActions[i - 1]; + if (prevAction[1] == action[1] && prevAction[2] == action[2]) { + pendingActions.splice(i, 1); + } + } + } + + // Lossless compression: ... drop consecutive moveTos ... + for (var i = 0; i < pendingActions.length - 1; /* incremented internally */) { + var action = pendingActions[i]; + if (action[0] == MOVE_TO && pendingActions[i + 1][0] == MOVE_TO) { + pendingActions.splice(i, 1); + } else { + i++; + } + } + + // Lossy compression: ... drop all but the extreme y-values ... + if (pendingActions.length > 2 && !opt_losslessOnly) { + // keep an initial moveTo, but drop all others. + var startIdx = 0; + if (pendingActions[0][0] == MOVE_TO) startIdx++; + var minIdx = null, maxIdx = null; + for (var i = startIdx; i < pendingActions.length; i++) { + var action = pendingActions[i]; + if (action[0] != LINE_TO) continue; + if (minIdx === null && maxIdx === null) { + minIdx = i; + maxIdx = i; + } else { + var y = action[2]; + if (y < pendingActions[minIdx][2]) { + minIdx = i; + } else if (y > pendingActions[maxIdx][2]) { + maxIdx = i; + } + } + } + var minAction = pendingActions[minIdx], + maxAction = pendingActions[maxIdx]; + pendingActions.splice(startIdx, pendingActions.length - startIdx); + if (minIdx < maxIdx) { + pendingActions.push(minAction); + pendingActions.push(maxAction); + } else if (minIdx > maxIdx) { + pendingActions.push(maxAction); + pendingActions.push(minAction); + } else { + pendingActions.push(minAction); + } + } + }; + + var flushActions = function(opt_noLossyCompression) { + compressActions(opt_noLossyCompression); + for (var i = 0, len = pendingActions.length; i < len; i++) { + var action = pendingActions[i]; + if (action[0] == LINE_TO) { + context.lineTo(action[1], action[2]); + } else if (action[0] == MOVE_TO) { + context.moveTo(action[1], action[2]); + } + } + actionCount += pendingActions.length; + pendingActions = []; + }; + + var addAction = function(action, x, y) { + var rx = Math.round(x); + if (lastRoundedX === null || rx != lastRoundedX) { + flushActions(); + lastRoundedX = rx; + } + pendingActions.push([action, x, y]); + }; + + return { + moveTo: function(x, y) { + addAction(MOVE_TO, x, y); + }, + lineTo: function(x, y) { + addAction(LINE_TO, x, y); + }, + + // for major operations like stroke/fill, we skip compression to ensure + // that there are no artifacts at the right edge. + stroke: function() { flushActions(true); context.stroke(); }, + fill: function() { flushActions(true); context.fill(); }, + beginPath: function() { flushActions(true); context.beginPath(); }, + closePath: function() { flushActions(true); context.closePath(); }, + + _count: function() { return actionCount; } + }; +}; + /** * Draws the shaded regions when "fillGraph" is set. Not to be confused with * error bars. @@ -661,6 +669,9 @@ DygraphCanvasRenderer._errorPlotter = function(e) { * @private */ DygraphCanvasRenderer._fillPlotter = function(e) { + // Skip if we're drawing a single series for interactive highlight overlay. + if (e.singleSeriesName) return; + // We'll handle all the series at once, not one-by-one. if (e.seriesIndex !== 0) return; @@ -676,31 +687,50 @@ DygraphCanvasRenderer._fillPlotter = function(e) { var anySeriesFilled = (function() { for (var i = 0; i < setNames.length; i++) { - if (g.getOption("fillGraph", setNames[i])) return true; + if (g.getBooleanOption("fillGraph", setNames[i])) return true; } return false; })(); if (!anySeriesFilled) return; - var ctx = e.drawingContext; var area = e.plotArea; var sets = e.allSeriesPoints; var setCount = sets.length; - var fillAlpha = g.getOption('fillAlpha'); - var stepPlot = g.getOption('stepPlot'); - var stackedGraph = g.getOption("stackedGraph"); + var fillAlpha = g.getNumericOption('fillAlpha'); + var stackedGraph = g.getBooleanOption("stackedGraph"); var colors = g.getColors(); - var baseline = {}; // for stacked graphs: baseline for filling + // For stacked graphs, track the baseline for filling. + // + // The filled areas below graph lines are trapezoids with two + // vertical edges. The top edge is the line segment being drawn, and + // the baseline is the bottom edge. Each baseline corresponds to the + // top line segment from the previous stacked line. In the case of + // step plots, the trapezoids are rectangles. + var baseline = {}; var currBaseline; + var prevStepPlot; // for different line drawing modes (line/step) per series + + // Helper function to trace a line back along the baseline. + var traceBackPath = function(ctx, baselineX, baselineY, pathBack) { + ctx.lineTo(baselineX, baselineY); + if (stackedGraph) { + for (var i = pathBack.length - 1; i >= 0; i--) { + var pt = pathBack[i]; + ctx.lineTo(pt[0], pt[1]); + } + } + }; // process sets in reverse order (needed for stacked graphs) for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) { + var ctx = e.drawingContext; var setName = setNames[setIdx]; - if (!g.getOption('fillGraph', setName)) continue; + if (!g.getBooleanOption('fillGraph', setName)) continue; + var stepPlot = g.getBooleanOption('stepPlot', setName); var color = colors[setIdx]; var axis = g.axisPropertiesForSeries(setName); var axisY = 1.0 + axis.minyval * axis.yscale; @@ -711,32 +741,61 @@ DygraphCanvasRenderer._fillPlotter = function(e) { var points = sets[setIdx]; var iter = Dygraph.createIterator(points, 0, points.length, DygraphCanvasRenderer._getIteratorPredicate( - g.getOption("connectSeparatedPoints"))); + g.getBooleanOption("connectSeparatedPoints", setName))); // 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 rgb = Dygraph.toRGB_(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 (!Dygraph.isOK(point.y)) { + var last_x, is_first = true; + + // If the point density is high enough, dropping segments on their way to + // the canvas justifies the overhead of doing so. + if (points.length > 2 * g.width_) { + ctx = DygraphCanvasRenderer._fastCanvasProxy(ctx); + } + + // For filled charts, we draw points from left to right, then back along + // the x-axis to complete a shape for filling. + // For stacked plots, this "back path" is a more complex shape. This array + // stores the [x, y] values needed to trace that shape. + var pathBack = []; + + // TODO(danvk): there are a lot of options at play in this loop. + // The logic would be much clearer if some (e.g. stackGraph and + // stepPlot) were split off into separate sub-plotters. + var point; + while (iter.hasNext) { + point = iter.next(); + if (!Dygraph.isOK(point.y) && !stepPlot) { + traceBackPath(ctx, prevX, prevYs[1], pathBack); + pathBack = []; prevX = NaN; + if (point.y_stacked !== null && !isNaN(point.y_stacked)) { + baseline[point.canvasx] = area.h * point.y_stacked + area.y; + } continue; } if (stackedGraph) { + if (!is_first && last_x == point.xval) { + continue; + } else { + is_first = false; + last_x = point.xval; + } + currBaseline = baseline[point.canvasx]; var lastY; if (currBaseline === undefined) { lastY = axisY; } else { - if(stepPlot) { + if(prevStepPlot) { lastY = currBaseline[0]; } else { lastY = currBaseline; @@ -744,10 +803,10 @@ DygraphCanvasRenderer._fillPlotter = function(e) { } newYs = [ point.canvasy, lastY ]; - if(stepPlot) { + if (stepPlot) { // Step plots must keep track of the top and bottom of // the baseline at each point. - if(prevYs[0] === -1) { + if (prevYs[0] === -1) { baseline[point.canvasx] = [ point.canvasy, axisY ]; } else { baseline[point.canvasx] = [ point.canvasy, prevYs[0] ]; @@ -757,30 +816,47 @@ DygraphCanvasRenderer._fillPlotter = function(e) { } } else { - newYs = [ point.canvasy, axisY ]; + if (isNaN(point.canvasy) && stepPlot) { + newYs = [ area.y + area.h, axisY ]; + } else { + newYs = [ point.canvasy, axisY ]; + } } if (!isNaN(prevX)) { - ctx.moveTo(prevX, prevYs[0]); - + // Move to top fill point 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]); - } + ctx.lineTo(point.canvasx, newYs[0]); } else { ctx.lineTo(point.canvasx, newYs[0]); - ctx.lineTo(point.canvasx, newYs[1]); } - ctx.lineTo(prevX, prevYs[1]); - ctx.closePath(); + // Record the baseline for the reverse path. + if (stackedGraph) { + pathBack.push([prevX, prevYs[1]]); + if (prevStepPlot && currBaseline) { + // Draw to the bottom of the baseline + pathBack.push([point.canvasx, currBaseline[1]]); + } else { + pathBack.push([point.canvasx, newYs[1]]); + } + } + } else { + ctx.moveTo(point.canvasx, newYs[1]); + ctx.lineTo(point.canvasx, newYs[0]); } prevYs = newYs; prevX = point.canvasx; } + prevStepPlot = stepPlot; + if (newYs && point) { + traceBackPath(ctx, point.canvasx, newYs[1], pathBack); + pathBack = []; + } ctx.fill(); } }; + +return DygraphCanvasRenderer; + +})();