X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=0c44e8479ef4ba71ba5a3b535111725d2c9257d2;hb=cbfcf21db4a2ef0f5db409591146f975ffe7b7f2;hp=5fd02e57579d2a03fcdbabd165c95c39a7fee636;hpb=436943f9fee49b1f892480f04f0dc4d5abc5fca0;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 5fd02e5..0c44e84 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -186,6 +186,7 @@ DygraphCanvasRenderer.prototype.render = function() { ctx.closePath(); ctx.stroke(); } + ctx.restore(); } if (this.attr_('drawXGrid')) { @@ -202,6 +203,7 @@ DygraphCanvasRenderer.prototype.render = function() { ctx.closePath(); ctx.stroke(); } + ctx.restore(); } // Do the ordinary rendering, as before @@ -584,7 +586,8 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { var points = this.layout.annotated_points; for (var i = 0; i < points.length; i++) { var p = points[i]; - if (p.canvasx < this.area.x || p.canvasx > this.area.x + this.area.w) { + if (p.canvasx < this.area.x || p.canvasx > this.area.x + this.area.w || + p.canvasy < this.area.y || p.canvasy > this.area.y + this.area.h) { continue; } @@ -631,13 +634,13 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { div.style.borderColor = this.colors[p.name]; a.div = div; - Dygraph.addEvent(div, 'click', + this.dygraph_.addEvent(div, 'click', bindEvt('clickHandler', 'annotationClickHandler', p, this)); - Dygraph.addEvent(div, 'mouseover', + this.dygraph_.addEvent(div, 'mouseover', bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this)); - Dygraph.addEvent(div, 'mouseout', + this.dygraph_.addEvent(div, 'mouseout', bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this)); - Dygraph.addEvent(div, 'dblclick', + this.dygraph_.addEvent(div, 'dblclick', bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this)); this.container.appendChild(div); @@ -658,6 +661,20 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { } }; +DygraphCanvasRenderer.makeNextPointStep_ = function( + connect, points, start, end) { + if (connect) { + return function(j) { + while (++j + start < end) { + if (!(points[start + j].yval === null)) break; + } + return j; + } + } else { + return function(j) { return j + 1 }; + } +}; + DygraphCanvasRenderer.prototype._drawStyledLine = function( ctx, i, setName, color, strokeWidth, strokePattern, drawPoints, drawPointCallback, pointSize) { @@ -672,15 +689,22 @@ DygraphCanvasRenderer.prototype._drawStyledLine = function( var points = this.layout.points; var prevX = null; var prevY = null; + var nextY = null; var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. if (!Dygraph.isArrayLike(strokePattern)) { strokePattern = null; } + var drawGapPoints = this.dygraph_.attr_('drawGapEdgePoints', setName); - var point; + var point, nextPoint; + var next = DygraphCanvasRenderer.makeNextPointStep_( + this.attr_('connectSeparatedPoints'), points, firstIndexInSet, + afterLastIndexInSet); ctx.save(); - for (var j = firstIndexInSet; j < afterLastIndexInSet; j++) { - point = points[j]; + for (var j = 0; j < setLength; j = next(j)) { + point = points[firstIndexInSet + j]; + nextY = (next(j) < setLength) ? + points[firstIndexInSet + next(j)].canvasy : null; if (isNullOrNaN(point.canvasy)) { if (stepPlot && prevX !== null) { // Draw a horizontal line to the start of the missing data @@ -695,8 +719,15 @@ DygraphCanvasRenderer.prototype._drawStyledLine = function( } 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))); + var isIsolated = (!prevX && isNullOrNaN(nextY)); + if (drawGapPoints) { + // Also consider a point to be is "isolated" if it's adjacent to a + // null point, excluding the graph edges. + if ((j > 0 && !prevX) || + (next(j) < setLength && isNullOrNaN(nextY))) { + isIsolated = true; + } + } if (prevX === null) { prevX = point.canvasx; prevY = point.canvasy; @@ -736,7 +767,6 @@ DygraphCanvasRenderer.prototype._drawStyledLine = function( this.dygraph_, setName, ctx, cb[0], cb[1], color, pointSize); ctx.restore(); } - firstIndexInSet = afterLastIndexInSet; ctx.restore(); }; @@ -813,6 +843,14 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { axis = this.dygraph_.axisPropertiesForSeries(setName); color = this.colors[setName]; + 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); + // setup graphics context prevX = NaN; prevY = NaN; @@ -824,9 +862,9 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { fillAlpha + ')'; ctx.fillStyle = err_color; ctx.beginPath(); - for (j = 0; j < pointsLength; j++) { + for (j = firstIndexInSet; j < afterLastIndexInSet; j = next(j)) { point = points[j]; - if (point.name == setName) { + if (point.name == setName) { // TODO(klausw): this is always true if (!Dygraph.isOK(point.y)) { prevX = NaN; continue; @@ -865,7 +903,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--) { @@ -876,6 +915,13 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { 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 afterLastIndexInSet = firstIndexInSet + setLength; + + var next = DygraphCanvasRenderer.makeNextPointStep_( + this.attr_('connectSeparatedPoints'), points, + afterLastIndexInSet); // setup graphics context prevX = NaN; @@ -887,29 +933,58 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { fillAlpha + ')'; ctx.fillStyle = err_color; ctx.beginPath(); - for (j = 0; j < pointsLength; j++) { + for (j = firstIndexInSet; j < afterLastIndexInSet; j = next(j)) { point = points[j]; - if (point.name == setName) { + 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(); } @@ -923,9 +998,6 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } // Drawing the lines. - var firstIndexInSet = 0; - var afterLastIndexInSet = 0; - var setLength = 0; for (i = 0; i < setCount; i += 1) { this._drawLine(ctx, i); }