X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=bdca5908ca91b661fe005ab688acc8a0f2f22394;hb=31f8e58ba608d0b046411ac82f54c968c70e4f37;hp=97dca1e842fc2d00f62f786798a78d847b6b0fd6;hpb=c02097ab8767f4977d97964a092923baddc7ca08;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 97dca1e..bdca590 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -383,9 +383,17 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { } // 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(halfUp(this.area.x), halfDown(this.area.y)); - context.lineTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h)); + context.moveTo(axisX, halfDown(this.area.y)); + context.lineTo(axisX, halfDown(this.area.y + this.area.h)); context.closePath(); context.stroke(); @@ -436,8 +444,16 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { } context.beginPath(); - context.moveTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h)); - context.lineTo(halfUp(this.area.x + this.area.w), halfDown(this.area.y + this.area.h)); + 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(); } @@ -661,100 +677,169 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { } }; -DygraphCanvasRenderer.makeNextPointStep_ = function(connect, points, end) { - if (connect) { - return function(j) { - while (++j < end) { - if (!(points[j].yval === null)) break; - } - return j; - } - } else { - return function(j) { return j + 1 }; - } -}; +/** + * Returns a predicate to be used with an iterator, which will + * iterate over points appropriately, depending on whether + * connectSeparatedPoints is true. When it's false, the predicate will + * skip over points with missing yVals. + */ +DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) { + return connectSeparatedPoints ? DygraphCanvasRenderer._predicateThatSkipsEmptyPoints : null; +} + +DygraphCanvasRenderer._predicateThatSkipsEmptyPoints = + function(array, idx) { return array[idx].yval !== null; } DygraphCanvasRenderer.prototype._drawStyledLine = function( ctx, i, setName, color, strokeWidth, strokePattern, drawPoints, drawPointCallback, pointSize) { - var isNullOrNaN = function(x) { - return (x === null || isNaN(x)); - }; - + // TODO(konigsberg): Compute attributes outside this method call. var stepPlot = this.attr_("stepPlot"); var firstIndexInSet = this.layout.setPointsOffsets[i]; var setLength = this.layout.setPointsLengths[i]; - var afterLastIndexInSet = firstIndexInSet + setLength; var points = this.layout.points; - var prevX = null; - var prevY = null; - var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. if (!Dygraph.isArrayLike(strokePattern)) { strokePattern = null; } + var drawGapPoints = this.dygraph_.attr_('drawGapEdgePoints', setName); - var point; - var next = DygraphCanvasRenderer.makeNextPointStep_( - this.attr_('connectSeparatedPoints'), points, afterLastIndexInSet); ctx.save(); - for (var j = firstIndexInSet; j < afterLastIndexInSet; j = next(j)) { - point = points[j]; + + var iter = Dygraph.createIterator(points, firstIndexInSet, setLength, + DygraphCanvasRenderer._getIteratorPredicate(this.attr_("connectSeparatedPoints"))); + + var pointsOnLine; + var strategy; + if (!strokePattern || strokePattern.length <= 1) { + strategy = trivialStrategy(ctx, color, strokeWidth); + } else { + strategy = nonTrivialStrategy(this, ctx, color, strokeWidth, strokePattern); + } + pointsOnLine = this._drawSeries(ctx, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, strategy); + this._drawPointsOnLine(ctx, pointsOnLine, drawPointCallback, setName, color, pointSize); + + ctx.restore(); +}; + +var nonTrivialStrategy = function(renderer, ctx, color, strokeWidth, strokePattern) { + return new function() { + this.init = function() { }; + this.finish = function() { }; + this.startSegment = function() { + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + }; + this.endSegment = function() { + ctx.stroke(); // should this include closePath? + }; + this.drawLine = function(x1, y1, x2, y2) { + renderer._dashedLine(ctx, x1, y1, x2, y2, strokePattern); + }; + this.skipPixel = function(prevX, prevY, curX, curY) { + // TODO(konigsberg): optimize with http://jsperf.com/math-round-vs-hack/6 ? + return (Math.round(prevX) == Math.round(curX) && + Math.round(prevY) == Math.round(curY)); + }; + }; +}; + +var trivialStrategy = function(ctx, color, strokeWidth) { + return new function() { + this.init = function() { + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + }; + this.finish = function() { + ctx.stroke(); // should this include closePath? + }; + this.startSegment = function() { }; + this.endSegment = function() { }; + this.drawLine = function(x1, y1, x2, y2) { + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + }; + // don't skip pixels. + this.skipPixel = function() { + return false; + }; + }; +}; + +DygraphCanvasRenderer.prototype._drawPointsOnLine = function(ctx, pointsOnLine, drawPointCallback, setName, color, pointSize) { + for (var idx = 0; idx < pointsOnLine.length; idx++) { + var cb = pointsOnLine[idx]; + ctx.save(); + drawPointCallback( + this.dygraph_, setName, ctx, cb[0], cb[1], color, pointSize); + ctx.restore(); + } +} + +DygraphCanvasRenderer.prototype._drawSeries = function( + ctx, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, + stepPlot, strategy) { + + var isNullOrNaN = function(x) { + return (x === null || isNaN(x)); + }; + + var prevCanvasX = null; + var prevCanvasY = null; + var nextCanvasY = null; + var isIsolated; // true if this point is isolated (no line segments) + var point; // the point being processed in the while loop + var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. + var first = true; // the first cycle through the while loop + + strategy.init(); + + while(iter.hasNext()) { + point = iter.next(); if (isNullOrNaN(point.canvasy)) { - if (stepPlot && prevX !== null) { + if (stepPlot && prevCanvasX !== null) { // Draw a horizontal line to the start of the missing data - ctx.beginPath(); - ctx.strokeStyle = color; - ctx.lineWidth = this.attr_('strokeWidth'); - this._dashedLine(ctx, prevX, prevY, point.canvasx, prevY, strokePattern); - ctx.stroke(); + strategy.startSegment(); + strategy.drawLine(prevX, prevY, point.canvasx, prevY); + strategy.endSegment(); } - // this will make us move to the next point, not draw a line to it. - prevX = prevY = null; + prevCanvasX = prevCanvasY = null; } else { - // A point is "isolated" if it is non-null but both the previous - // and next points are null. - var isIsolated = (!prevX && (j == points.length - 1 || - isNullOrNaN(points[j+1].canvasy))); - if (prevX === null) { - prevX = point.canvasx; - prevY = point.canvasy; - } else { - // Skip over points that will be drawn in the same pixel. - if (Math.round(prevX) == Math.round(point.canvasx) && - Math.round(prevY) == Math.round(point.canvasy)) { + nextCanvasY = iter.hasNext() ? iter.peek().canvasy : null; + isIsolated = (!prevCanvasX && isNullOrNaN(nextCanvasY)); + 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() && isNullOrNaN(nextCanvasY))) { + isIsolated = true; + } + } + if (prevCanvasX !== null) { + if (strategy.skipPixel(prevCanvasX, prevCanvasY, point.canvasx, point.canvasy)) { continue; } - // TODO(antrob): skip over points that lie on a line that is already - // going to be drawn. There is no need to have more than 2 - // consecutive points that are collinear. if (strokeWidth) { - ctx.beginPath(); - ctx.strokeStyle = color; - ctx.lineWidth = strokeWidth; + strategy.startSegment(); if (stepPlot) { - this._dashedLine(ctx, prevX, prevY, point.canvasx, prevY, strokePattern); - prevX = point.canvasx; + strategy.drawLine(prevCanvasX, prevCanvasY, point.canvasx, prevCanvasY); + prevCanvasX = point.canvasx; } - this._dashedLine(ctx, prevX, prevY, point.canvasx, point.canvasy, strokePattern); - prevX = point.canvasx; - prevY = point.canvasy; - ctx.stroke(); + strategy.drawLine(prevCanvasX, prevCanvasY, point.canvasx, point.canvasy); + strategy.endSegment(); } } - if (drawPoints || isIsolated) { pointsOnLine.push([point.canvasx, point.canvasy]); } + prevCanvasX = point.canvasx; + prevCanvasY = point.canvasy; } + first = false; } - for (var idx = 0; idx < pointsOnLine.length; idx++) { - var cb = pointsOnLine[idx]; - ctx.save(); - drawPointCallback( - this.dygraph_, setName, ctx, cb[0], cb[1], color, pointSize); - ctx.restore(); - } - ctx.restore(); + strategy.finish(); + return pointsOnLine; }; DygraphCanvasRenderer.prototype._drawLine = function(ctx, i) { @@ -765,6 +850,7 @@ DygraphCanvasRenderer.prototype._drawLine = function(ctx, i) { var borderWidth = this.dygraph_.attr_("strokeBorderWidth", setName); var drawPointCallback = this.dygraph_.attr_("drawPointCallback", setName) || Dygraph.Circles.DEFAULT; + if (borderWidth && strokeWidth) { this._drawStyledLine(ctx, i, setName, this.dygraph_.attr_("strokeBorderColor", setName), @@ -799,7 +885,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var stepPlot = this.attr_("stepPlot"); var points = this.layout.points; var pointsLength = points.length; - var point, i, j, prevX, prevY, prevYs, color, setName, newYs, err_color, rgb, yscale, axis; + var point, i, prevX, prevY, prevYs, color, setName, newYs, err_color, rgb, yscale, axis; var setNames = this.layout.setNames; var setCount = setNames.length; @@ -812,6 +898,10 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { // Update Points // TODO(danvk): here + // + // 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]; point.canvasx = this.area.w * point.x + this.area.x; @@ -832,11 +922,9 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { var firstIndexInSet = this.layout.setPointsOffsets[i]; var setLength = this.layout.setPointsLengths[i]; - var afterLastIndexInSet = firstIndexInSet + setLength; - var next = DygraphCanvasRenderer.makeNextPointStep_( - this.attr_('connectSeparatedPoints'), points, - afterLastIndexInSet); + var iter = Dygraph.createIterator(points, firstIndexInSet, setLength, + DygraphCanvasRenderer._getIteratorPredicate(this.attr_("connectSeparatedPoints"))); // setup graphics context prevX = NaN; @@ -849,8 +937,8 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { fillAlpha + ')'; ctx.fillStyle = err_color; ctx.beginPath(); - for (j = firstIndexInSet; j < afterLastIndexInSet; j = next(j)) { - point = points[j]; + while (iter.hasNext()) { + point = iter.next(); if (point.name == setName) { // TODO(klausw): this is always true if (!Dygraph.isOK(point.y)) { prevX = NaN; @@ -890,7 +978,8 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { ctx.restore(); } else if (fillGraph) { ctx.save(); - var baseline = []; // for stacked graphs: baseline for filling + 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--) { @@ -903,11 +992,9 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { axisY = this.area.h * axisY + this.area.y; var firstIndexInSet = this.layout.setPointsOffsets[i]; var setLength = this.layout.setPointsLengths[i]; - var afterLastIndexInSet = firstIndexInSet + setLength; - var next = DygraphCanvasRenderer.makeNextPointStep_( - this.attr_('connectSeparatedPoints'), points, - afterLastIndexInSet); + var iter = Dygraph.createIterator(points, firstIndexInSet, setLength, + DygraphCanvasRenderer._getIteratorPredicate(this.attr_("connectSeparatedPoints"))); // setup graphics context prevX = NaN; @@ -919,29 +1006,58 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { fillAlpha + ')'; ctx.fillStyle = err_color; ctx.beginPath(); - for (j = firstIndexInSet; j < afterLastIndexInSet; j = next(j)) { - point = points[j]; + 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) { - var lastY = baseline[point.canvasx]; - if (lastY === undefined) lastY = axisY; - baseline[point.canvasx] = point.canvasy; + currBaseline = baseline[point.canvasx]; + var lastY; + if (currBaseline === undefined) { + lastY = axisY; + } else { + if(stepPlot) { + lastY = currBaseline[0]; + } else { + 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 { + baseline[point.canvasx] = point.canvasy; + } + } 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[1]); + } } else { ctx.lineTo(point.canvasx, newYs[0]); + ctx.lineTo(point.canvasx, newYs[1]); } - ctx.lineTo(point.canvasx, newYs[1]); + ctx.lineTo(prevX, prevYs[1]); ctx.closePath(); }