From: Tanner Linsley Date: Tue, 2 Jun 2015 19:42:09 +0000 (-0600) Subject: line: skipNull functionality X-Git-Tag: v2.0-alpha~2^2~30 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b7dc2339f4951a12c148d4fdcdc21f9ec9350886;p=thirdparty%2FChart.js.git line: skipNull functionality --- diff --git a/samples/line.html b/samples/line.html index 2a1794284..b954d7d15 100644 --- a/samples/line.html +++ b/samples/line.html @@ -26,11 +26,11 @@ labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], - fill: false + data: [null, randomScalingFactor(), randomScalingFactor(), null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], + fill: false, }, { label: "My Second dataset", - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] + data: [null, randomScalingFactor(), randomScalingFactor(), null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], }] }; @@ -47,7 +47,7 @@ window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line({ - data: lineChartData, + data: lineChartData, options: { responsive: true, hover: { diff --git a/src/Chart.Core.js b/src/Chart.Core.js index e9b27caf9..9c9587bd0 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -100,6 +100,8 @@ borderWidth: 3, borderColor: defaultColor, fill: true, // do we fill in the area between the line and the x axis + skipNull: true, + drawNull: false, // Hover hitRadius: 6, @@ -373,11 +375,11 @@ fa = t * d01 / (d01 + d12), // scaling factor for triangle Ta fb = t * d12 / (d01 + d12); return { - next: { + previous: { x: MiddlePoint.x - fa * (AfterPoint.x - FirstPoint.x), y: MiddlePoint.y - fa * (AfterPoint.y - FirstPoint.y) }, - previous: { + next: { x: MiddlePoint.x + fb * (AfterPoint.x - FirstPoint.x), y: MiddlePoint.y + fb * (AfterPoint.y - FirstPoint.y) } @@ -1212,6 +1214,11 @@ var vm = this._view; var ctx = this._chart.ctx; + + if (vm.skip) { + return; + } + if (vm.radius > 0 || vm.borderWidth > 0) { ctx.beginPath(); @@ -1241,12 +1248,32 @@ // Draw the background first (so the border is always on top) helpers.each(this._children, function(point, index) { + var scaleZero = point._yScale.getPointPixelForValue(0); + + // First point only if (index === 0) { - ctx.moveTo(point._view.x, point._view.y); - } else { + if (point._view.skip && vm.skipNull) { + ctx.moveTo(point._view.x, scaleZero); + } else { + ctx.moveTo(point._view.x, point._view.y); + } + return; + } + + // Start Skip and drag along scale baseline + if (point._view.skip && vm.skipNull) { + ctx.lineTo(this.previousPoint(point, this._children, index)._view.x, scaleZero); + ctx.moveTo(this.nextPoint(point, this._children, index)._view.x, scaleZero); + } + // End Skip Stright line from the base line + else if (this.previousPoint(point, this._children, index)._view.skip && vm.skipNull) { + ctx.moveTo(point._view.x, scaleZero); + ctx.lineTo(point._view.x, point._view.y); + } + // Normal Bezier Curve + else { if (vm._tension > 0 || 1) { var previous = this.previousPoint(point, this._children, index); - ctx.bezierCurveTo( previous._view.controlPointNextX, previous._view.controlPointNextY, @@ -1261,8 +1288,8 @@ } }, this); + // For radial scales, loop back around to the first point if (vm.loop) { - if (vm._tension > 0 || 1) { ctx.bezierCurveTo( @@ -1295,12 +1322,31 @@ ctx.beginPath(); helpers.each(this._children, function(point, index) { + var scaleZero = point._yScale.getPointPixelForValue(0); + // First point only if (index === 0) { + if (point._view.skip && vm.skipNull) { + ctx.moveTo(point._view.x, scaleZero); + } else { + ctx.moveTo(point._view.x, point._view.y); + } + return; + } + + // Start Skip and drag along scale baseline + if (point._view.skip && vm.skipNull) { + ctx.moveTo(this.previousPoint(point, this._children, index)._view.x, scaleZero); + ctx.moveTo(this.nextPoint(point, this._children, index)._view.x, scaleZero); + } + // End Skip Stright line from the base line + else if (this.previousPoint(point, this._children, index)._view.skip && vm.skipNull) { + ctx.moveTo(point._view.x, scaleZero); ctx.moveTo(point._view.x, point._view.y); - } else { + } + // Normal Bezier Curve + else { if (vm._tension > 0 || 1) { var previous = this.previousPoint(point, this._children, index); - ctx.bezierCurveTo( previous._view.controlPointNextX, previous._view.controlPointNextY, @@ -1339,6 +1385,11 @@ return true; }, index) || point; }, + nextPoint: function(point, collection, index) { + return helpers.findNextWhere(collection, function() { + return true; + }, index) || point; + }, }); Chart.Arc = Chart.Element.extend({ diff --git a/src/Chart.Line.js b/src/Chart.Line.js index 06f4c09b8..4def96168 100644 --- a/src/Chart.Line.js +++ b/src/Chart.Line.js @@ -111,12 +111,12 @@ _index: index, _chart: this.chart, _model: { - x: 0,//xScale.getPixelForValue(null, index, true), + x: 0, //xScale.getPixelForValue(null, index, true), y: 0, //this.chartArea.bottom, - controlPointPreviousX: this.previousPoint(dataset.data, index).x, - controlPointPreviousY: this.nextPoint(dataset.data, index).y, - controlPointNextX: this.previousPoint(dataset.data, index).x, - controlPointNextY: this.nextPoint(dataset.data, index).y, + //controlPointPreviousX: this.previousPoint(dataset.data, index).x, + //controlPointPreviousY: this.previousPoint(dataset.data, index).y, + //controlPointNextX: this.nextPoint(dataset.data, index).x, + //controlPointNextY: this.nextPoint(dataset.data, index).y, }, })); }, this); @@ -144,10 +144,10 @@ this.update(); }, nextPoint: function(collection, index) { - return collection[index - 1] || collection[index]; + return collection[index + 1] || collection[index]; }, previousPoint: function(collection, index) { - return collection[index + 1] || collection[index]; + return collection[index - 1] || collection[index]; }, update: function() { @@ -171,7 +171,8 @@ borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth, borderColor: dataset.borderColor || this.options.elements.line.borderColor, fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default - + skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull, + drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull, // Scale scaleTop: yScale.top, scaleBottom: yScale.bottom, @@ -206,6 +207,7 @@ backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor), borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor), borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth), + skip: typeof this.data.datasets[datasetIndex].data[index] != 'number', // Tooltip hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius), @@ -497,7 +499,7 @@ // Active if (this.active.length) { this.tooltip._model.opacity = 1; - + helpers.extend(this.tooltip, { _active: this.active, });