From: Wim Bruynooghe Date: Mon, 19 Nov 2012 14:10:41 +0000 (+0100) Subject: Range selector: stepplots and fix for gaps in data X-Git-Tag: v1.0.0~170^2~1 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;ds=inline;h=e03d443c0a280d8303fc608c917ad2563ca154f1;p=dygraphs.git Range selector: stepplots and fix for gaps in data - The range selector used to draw always a line chart, now it will also draw a step plot like the main graph when this option is enabled - When there are gaps in the data, the range selector drew skew lines. Now, during a gap the line will be drawn at the bottom. --- diff --git a/dygraph-range-selector.js b/dygraph-range-selector.js index e2973b0..5b43d5d 100644 --- a/dygraph-range-selector.js +++ b/dygraph-range-selector.js @@ -480,6 +480,8 @@ DygraphRangeSelector.prototype.drawMiniPlot_ = function() { return; } + var stepPlot = this.attr_('stepPlot'); + var combinedSeriesData = this.computeCombinedSeriesAndLimits_(); var yRange = combinedSeriesData.yMax - combinedSeriesData.yMin; @@ -494,15 +496,37 @@ DygraphRangeSelector.prototype.drawMiniPlot_ = function() { var canvasWidth = this.canvasRect_.w - margin; var canvasHeight = this.canvasRect_.h - margin; + var prevX = null, prevY = null; + ctx.beginPath(); ctx.moveTo(margin, canvasHeight); for (var i = 0; i < combinedSeriesData.data.length; i++) { var dataPoint = combinedSeriesData.data[i]; - var x = (dataPoint[0] - xExtremes[0])*xFact; - var y = canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact; + var x = ((dataPoint[0] !== null) ? ((dataPoint[0] - xExtremes[0])*xFact) : NaN); + var y = ((dataPoint[1] !== null) ? (canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact) : NaN); if (isFinite(x) && isFinite(y)) { + if(prevX === null) { + ctx.lineTo(x, canvasHeight); + } + else if (stepPlot) { + ctx.lineTo(x, prevY); + } ctx.lineTo(x, y); - } + prevX = x; + prevY = y; + } + else { + if(prevX !== null) { + if (stepPlot) { + ctx.lineTo(x, prevY); + ctx.lineTo(x, canvasHeight); + } + else { + ctx.lineTo(prevX, canvasHeight); + } + } + prevX = prevY = null; + } } ctx.lineTo(canvasWidth, canvasHeight); ctx.closePath();