Radar Chart skipNull & bezier fixes

diff --git a/samples/radar.html b/samples/radar.html
index 4a5c3f05b7efff2365918bd3ad083d519b18a04e..199791904d1dbd5b84615f5d390e18ab0ac1852f 100644 (file)
--- a/samples/radar.html
+++ b/samples/radar.html
@@ -27,14 +27,14 @@
                 label: "My First dataset",
                 backgroundColor: "rgba(220,220,220,0.2)",
                 pointBackgroundColor: "rgba(220,220,220,1)",
-                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+                data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
             }, {
                 label: "My Second dataset",
                 backgroundColor: "rgba(151,187,205,0.2)",
                 pointBackgroundColor: "rgba(151,187,205,1)",
                 hoverPointBackgroundColor: "#fff",
                 pointHighlightStroke: "rgba(151,187,205,1)",
-                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+                data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
             }]
         },
         options: {

diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 221086b76006f7d1033d72fb5c8f5a63ab20627d..3e5304d299d2e445d24b1e401e33a278fbb195c6 100755 (executable)
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -1274,32 +1274,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);
+                var previous = this.previousPoint(point, this._children, index);
+                var next = this.nextPoint(point, this._children, index);
 
                 // 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);
-                    }
+                    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);
+                if (point._view.skip && vm.skipNull && !this._loop) {
+                    ctx.lineTo(previous._view.x, point._view.y);
+                    ctx.moveTo(next._view.x, point._view.y);
                 }
                 // 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);
+                else if (previous._view.skip && vm.skipNull && !this._loop) {
+                    ctx.moveTo(point._view.x, previous._view.y);
                     ctx.lineTo(point._view.x, point._view.y);
                 }
+
+                if (previous._view.skip && vm.skipNull) {
+                    ctx.moveTo(point._view.x, point._view.y);
+                }
                 // Normal Bezier Curve
                 else {
-                    if (vm._tension > 0 || 1) {
-                        var previous = this.previousPoint(point, this._children, index);
+                    if (vm.tension > 0) {
                         ctx.bezierCurveTo(
                             previous._view.controlPointNextX,
                             previous._view.controlPointNextY,
@@ -1315,8 +1315,8 @@
             }, this);
 
             // For radial scales, loop back around to the first point
-            if (vm.loop) {
-                if (vm._tension > 0 || 1) {
+            if (this._loop) {
+                if (vm.tension > 0 && !first._view.skip) {
 
                     ctx.bezierCurveTo(
                         last._view.controlPointNextX,
@@ -1348,46 +1348,49 @@
             ctx.beginPath();
 
             helpers.each(this._children, function(point, index) {
-                var scaleZero = point._yScale.getPointPixelForValue(0);
+                var previous = this.previousPoint(point, this._children, index);
+                var next = this.nextPoint(point, this._children, index);
+
                 // 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);
-                    }
+                    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);
+                if (point._view.skip && vm.skipNull && !this._loop) {
+                    ctx.moveTo(previous._view.x, point._view.y);
+                    ctx.moveTo(next._view.x, point._view.y);
+                    return;
                 }
                 // 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);
+                if (previous._view.skip && vm.skipNull && !this._loop) {
+                    ctx.moveTo(point._view.x, previous._view.y);
+                    ctx.moveTo(point._view.x, point._view.y);
+                    return;
+                }
+
+                if (previous._view.skip && vm.skipNull) {
                     ctx.moveTo(point._view.x, point._view.y);
+                    return;
                 }
                 // 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,
-                            point._view.controlPointPreviousX,
-                            point._view.controlPointPreviousY,
-                            point._view.x,
-                            point._view.y
-                        );
-                    } else {
-                        ctx.lineTo(point._view.x, point._view.y);
-                    }
+                if (vm.tension > 0) {
+                    ctx.bezierCurveTo(
+                        previous._view.controlPointNextX,
+                        previous._view.controlPointNextY,
+                        point._view.controlPointPreviousX,
+                        point._view.controlPointPreviousY,
+                        point._view.x,
+                        point._view.y
+                    );
+                } else {
+                    ctx.lineTo(point._view.x, point._view.y);
                 }
             }, this);
-            if (vm.loop) {
-                if (vm._tension > 0 || 1) {
+
+            if (this._loop && !first._view.skip) {
+                if (vm.tension > 0) {
 
                     ctx.bezierCurveTo(
                         last._view.controlPointNextX,
@@ -1406,15 +1409,17 @@
             ctx.stroke();
 
         },
-        previousPoint: function(point, collection, index) {
-            return helpers.findPreviousWhere(collection, function() {
-                return true;
-            }, index) || point;
-        },
         nextPoint: function(point, collection, index) {
-            return helpers.findNextWhere(collection, function() {
-                return true;
-            }, index) || point;
+            if (this.loop) {
+                return collection[index + 1] || collection[0];
+            }
+            return collection[index + 1] || collection[collection.length - 1];
+        },
+        previousPoint: function(point, collection, index) {
+            if (this.loop) {
+                return collection[index - 1] || collection[collection.length - 1];
+            }
+            return collection[index - 1] || collection[0];
         },
     });
 

diff --git a/src/Chart.Radar.js b/src/Chart.Radar.js
index dffaa2a473844ee6812929be39f25f3acf1f7c7b..b8f0436b5f0a1b9e6ba0844b6c3d1bb4d0019703 100644 (file)
--- a/src/Chart.Radar.js
+++ b/src/Chart.Radar.js
@@ -95,7 +95,7 @@
                     _chart: this.chart,
                     _datasetIndex: datasetIndex,
                     _points: dataset.metaData,
-                    loop: true,
+                    _loop: true
                 });
 
                 dataset.metaData = [];
@@ -134,12 +134,13 @@
             this.update();
         },
         nextPoint: function(collection, index) {
-            return collection[index + 1] || collection[collection.length - 1];
+            return collection[index + 1] || collection[0];
         },
         previousPoint: function(collection, index) {
-            return collection[index - 1] || collection[0];
+            return collection[index - 1] || collection[collection.length - 1];
         },
         resetElements: function() {
+
             // Update the points
             this.eachElement(function(point, index, dataset, datasetIndex) {
                 helpers.extend(point, {
@@ -147,6 +148,7 @@
                     _chart: this.chart,
                     _datasetIndex: datasetIndex,
                     _index: index,
+                    _scale: this.scale,
 
                     // Desired view properties
                     _model: {
@@ -176,28 +178,10 @@
                     point._model.tension
                 );
 
-                point._model.controlPointPreviousX = controlPoints.previous.x;
-                point._model.controlPointNextX = controlPoints.next.x;
-
-                // Prevent the bezier going outside of the bounds of the graph
-
-                // Cap puter bezier handles to the upper/lower scale bounds
-                if (controlPoints.next.y > this.chartArea.bottom) {
-                    point._model.controlPointNextY = this.chartArea.bottom;
-                } else if (controlPoints.next.y < this.chartArea.top) {
-                    point._model.controlPointNextY = this.chartArea.top;
-                } else {
-                    point._model.controlPointNextY = controlPoints.next.y;
-                }
-
-                // Cap inner bezier handles to the upper/lower scale bounds
-                if (controlPoints.previous.y > this.chartArea.bottom) {
-                    point._model.controlPointPreviousY = this.chartArea.bottom;
-                } else if (controlPoints.previous.y < this.chartArea.top) {
-                    point._model.controlPointPreviousY = this.chartArea.top;
-                } else {
-                    point._model.controlPointPreviousY = controlPoints.previous.y;
-                }
+                point._model.controlPointPreviousX = this.scale.xCenter;
+                point._model.controlPointPreviousY = this.scale.yCenter;
+                point._model.controlPointNextX = this.scale.xCenter;
+                point._model.controlPointNextY = this.scale.yCenter;
 
                 // Now pivot the point for animation
                 point.pivot();
@@ -211,10 +195,10 @@
                 helpers.extend(dataset.metaDataset, {
                     // Utility
                     _datasetIndex: datasetIndex,
-                    
+
                     // Data
                     _children: dataset.metaData,
-                    
+
                     // Model
                     _model: {
                         // Appearance
@@ -225,7 +209,7 @@
                         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: this.scale.top,
                         scaleBottom: this.scale.bottom,
@@ -351,9 +335,7 @@
             this.clear();
 
             // Draw all the scales
-            helpers.each(this.scales, function(scale) {
-                scale.draw(this.chartArea);
-            }, this);
+            this.scale.draw(this.chartArea);
 
             // reverse for-loop for proper stacking
             for (var i = this.data.datasets.length - 1; i >= 0; i--) {