line: skipNull functionality

diff --git a/samples/line.html b/samples/line.html
index 2a1794284ba46d214a32dc93fa7f57e121903123..b954d7d15a94044a2f5918d0bf0733eed4208545 100644 (file)
--- 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 e9b27caf9abc4ffd54ede2a6371c212deefbcc44..9c9587bd06cb6bdd11ecf0844503d86c84e3700a 100755 (executable)
--- 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 06f4c09b8d9daa014d74759dea5516c2a9a355ca..4def961689245a61cc46ab1ce28077c2a0ff7172 100644 (file)
--- 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,
                     });