Clean up of radial linear scale. Radar chart update function improvements

diff --git a/src/charts/chart.polarArea.js b/src/charts/chart.polarArea.js
index b1f6a0f8fa0cfc120d775ad6922f8fedf386ea2f..dcbb90c4236a1b442505d70406d0214db91a1f5b 100644 (file)
--- a/src/charts/chart.polarArea.js
+++ b/src/charts/chart.polarArea.js
@@ -141,7 +141,7 @@
                                                x: this.chart.width / 2,
                                                y: this.chart.height / 2,
                                                innerRadius: 0,
-                                               outerRadius: this.scale.calculateCenterOffset(value),
+                                               outerRadius: this.scale.getDistanceFromCenterForValue(value),
                                                startAngle: startAngle,
                                                endAngle: endAngle,
 

diff --git a/src/charts/chart.radar.js b/src/charts/chart.radar.js
index bff30df9005c5ca900ffcc5747cc484502e636d3..3f723cba30bc4b36be67009792f7d8092776bab8 100644 (file)
--- a/src/charts/chart.radar.js
+++ b/src/charts/chart.radar.js
@@ -131,6 +131,11 @@
                        }, this);
                },
                update: function(animationDuration) {
+                       this.scale.setScaleSize();
+                       this.scale.calculateRange();
+                       this.scale.generateTicks();
+                       this.scale.buildYLabels();
+                       
                        Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
 
                        // Update the lines
@@ -138,11 +143,11 @@
                                var scaleBase;
 
                                if (this.scale.min < 0 && this.scale.max < 0) {
-                                       scaleBase = this.scale.getPointPosition(0, this.scale.max);
+                                       scaleBase = this.scale.getPointPositionForValue(0, this.scale.max);
                                } else if (this.scale.min > 0 && this.scale.max > 0) {
-                                       scaleBase = this.scale.getPointPosition(0, this.scale.min);
+                                       scaleBase = this.scale.getPointPositionForValue(0, this.scale.min);
                                } else {
-                                       scaleBase = this.scale.getPointPosition(0, 0);
+                                       scaleBase = this.scale.getPointPositionForValue(0, 0);
                                }
 
                                helpers.extend(dataset.metaDataset, {
@@ -175,7 +180,7 @@
 
                        // Update the points
                        this.eachElement(function(point, index, dataset, datasetIndex) {
-                               var pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(this.data.datasets[datasetIndex].data[index]));
+                               var pointPosition = this.scale.getPointPositionForValue(index, this.data.datasets[datasetIndex].data[index]);
 
                                helpers.extend(point, {
                                        // Utility

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index b15c487a373a6d14a830107d5f1169eee064e8a1..530c1ebe8f02135b3c266155aebe8de5b4af0ffa 100644 (file)
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -71,11 +71,6 @@
                        this.size = helpers.min([this.height, this.width]);
                        this.drawingArea = (this.options.display) ? (this.size / 2) - (this.options.labels.fontSize / 2 + this.options.labels.backdropPaddingY) : (this.size / 2);
                },
-               calculateCenterOffset: function(value) {
-                       // Take into account half font size + the yPadding of the top value
-                       var scalingFactor = this.drawingArea / (this.max - this.min);
-                       return (value - this.min) * scalingFactor;
-               },
                update: function() {
                        if (!this.options.lineArc) {
                                this.setScaleSize();
@@ -323,6 +318,11 @@
 
                        return index * angleMultiplier - (Math.PI / 2);
                },
+               getDistanceFromCenterForValue: function(value) {
+                       // Take into account half font size + the yPadding of the top value
+                       var scalingFactor = this.drawingArea / (this.max - this.min);
+                       return (value - this.min) * scalingFactor;
+               },
                getPointPosition: function(index, distanceFromCenter) {
                        var thisAngle = this.getIndexAngle(index);
                        return {
@@ -330,15 +330,17 @@
                                y: (Math.sin(thisAngle) * distanceFromCenter) + this.yCenter
                        };
                },
+               getPointPositionForValue: function(index, value) {
+                       return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
+               },
                draw: function() {
                        if (this.options.display) {
                                var ctx = this.ctx;
                                helpers.each(this.yLabels, function(label, index) {
                                        // Don't draw a centre value
                                        if (index > 0) {
-                                               var yCenterOffset = index * (this.drawingArea / Math.max(this.ticks.length, 1)),
-                                                       yHeight = this.yCenter - yCenterOffset,
-                                                       pointPosition;
+                                               var yCenterOffset = this.getDistanceFromCenterForValue(this.ticks[index]);
+                                               var yHeight = this.yCenter - yCenterOffset;
 
                                                // Draw circular lines around the scale
                                                if (this.options.gridLines.show) {
@@ -346,14 +348,16 @@
                                                        ctx.lineWidth = this.options.gridLines.lineWidth;
 
                                                        if (this.options.lineArc) {
+                                                               // Draw circular arcs between the points
                                                                ctx.beginPath();
                                                                ctx.arc(this.xCenter, this.yCenter, yCenterOffset, 0, Math.PI * 2);
                                                                ctx.closePath();
                                                                ctx.stroke();
                                                        } else {
+                                                               // Draw straight lines connecting each index
                                                                ctx.beginPath();
                                                                for (var i = 0; i < this.valuesCount; i++) {
-                                                                       pointPosition = this.getPointPosition(i, this.calculateCenterOffset(this.ticks[index]));
+                                                                       var pointPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.ticks[index]));
                                                                        if (i === 0) {
                                                                                ctx.moveTo(pointPosition.x, pointPosition.y);
                                                                        } else {
@@ -368,14 +372,14 @@
                                                if (this.options.labels.show) {
                                                        ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
 
-                                                       if (this.showLabelBackdrop) {
+                                                       if (this.options.labels.showLabelBackdrop) {
                                                                var labelWidth = ctx.measureText(label).width;
                                                                ctx.fillStyle = this.options.labels.backdropColor;
                                                                ctx.fillRect(
                                                                        this.xCenter - labelWidth / 2 - this.options.labels.backdropPaddingX,
                                                                        yHeight - this.fontSize / 2 - this.options.labels.backdropPaddingY,
                                                                        labelWidth + this.options.labels.backdropPaddingX * 2,
-                                                                       this.options.labels.fontSize + this.options.lables.backdropPaddingY * 2
+                                                                       this.options.labels.fontSize + this.options.labels.backdropPaddingY * 2
                                                                );
                                                        }
 
@@ -393,7 +397,7 @@
 
                                        for (var i = this.valuesCount - 1; i >= 0; i--) {
                                                if (this.options.angleLines.show) {
-                                                       var outerPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max));
+                                                       var outerPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.max));
                                                        ctx.beginPath();
                                                        ctx.moveTo(this.xCenter, this.yCenter);
                                                        ctx.lineTo(outerPosition.x, outerPosition.y);
@@ -401,7 +405,7 @@
                                                        ctx.closePath();
                                                }
                                                // Extra 3px out for some label spacing
-                                               var pointLabelPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max) + 5);
+                                               var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.max) + 5);
                                                ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
                                                ctx.fillStyle = this.options.pointLabels.fontColor;