]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
projects / thirdparty / Chart.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 73af6a3)
Polar area charts now support addData and removeData. Fixed an issue with the animate...
authorEvert Timberg <evert.timberg@gmail.com>
Thu, 18 Jun 2015 22:51:00 +0000 (18:51 -0400)
committerEvert Timberg <evert.timberg@gmail.com>
Thu, 18 Jun 2015 22:51:00 +0000 (18:51 -0400)
samples/polar-area.html patch | blob | blame | history
src/controllers/controller.polarArea.js patch | blob | blame | history

diff --git a/samples/polar-area.html b/samples/polar-area.html
index 73d5c604972938a908fa6e32e88f435a5092eb9e..a8c74d16b61316f7fda1c5b7c2506dcd21703b77 100644 (file)
--- a/samples/polar-area.html
+++ b/samples/polar-area.html
@@ -8,10 +8,12 @@
 </head>
 
 <body>
-    <div id="canvas-holder" style="width:100%">
+    <div id="canvas-holder" style="width:50%">
         <canvas id="chart-area" width="300" height="300" />
     </div>
     <button id="randomizeData">Randomize Data</button>
+    <button id="addData">Add Data</button>
+    <button id="removeData">Remove Data</button>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -19,6 +21,9 @@
     var randomColorFactor = function() {
         return Math.round(Math.random() * 255);
     };
+    var randomColor = function(opacity) {
+        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+    };
 
     var config = {
         data: {
@@ -60,11 +65,31 @@
         $.each(config.data.datasets, function(i, piece) {
             $.each(piece.data, function(j, value) {
                 config.data.datasets[i].data[j] = randomScalingFactor();
-                //config.data.datasets.backgroundColor[i] = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+                config.data.datasets[i].backgroundColor[j] = randomColor();
             });
         });
         window.myPolarArea.update();
     });
+
+    $('#addData').click(function() {
+        if (config.data.datasets.length > 0) {
+            config.data.labels.push('dataset #' + config.data.labels.length);
+
+            for (var index = 0; index < config.data.datasets.length; ++index) {
+                config.data.datasets[index].backgroundColor.push(randomColor());
+                window.myPolarArea.addData(randomScalingFactor(), index);
+            }
+        }
+    });
+
+    $('#removeData').click(function() {
+        config.data.labels.splice(-1, 1); // remove the label first
+
+        config.data.datasets.forEach(function(dataset, datasetIndex) {
+            dataset.backgroundColor.splice(-1, 1);
+            window.myPolarArea.removeData(datasetIndex, -1);
+        });
+    });
     </script>
 </body>
 
diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 733ab9dc6d0b39ef10e7822fe5896af12628fb19..4fe948bf84361b1f29b28375761ca377f2d91282 100644 (file)
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -16,6 +16,7 @@
 
                //Boolean - Whether to animate the rotation of the chart
                animateRotate: true,
+               animateScale: true,
        };
 
        Chart.controllers.polarArea = function(chart, datasetIndex) {
@@ -56,6 +57,23 @@
                                });
                        }, this);
                },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var arc = new Chart.elements.Arc({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index,
+                       });
+
+                       // Reset the point
+                       this.updateElement(arc, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, arc);
+               },
+               removeElement: function(index) {
+                       this.getDataset().metaData.splice(index, 1);
+               },
 
                reset: function() {
                        this.update(true);
@@ -82,14 +100,44 @@
                        this.innerRadius = this.outerRadius - this.chart.radiusLength;
 
                        helpers.each(this.getDataset().metaData, function(arc, index) {
-
-                               var resetModel = {
+                               this.updateElement(arc, index, reset);
+                       }, this);
+               },
+               updateElement: function(arc, index, reset) {
+                       var circumference = 1 / this.getDataset().data.length * 2;
+                       var startAngle = (-0.5 * Math.PI) + (Math.PI * circumference) * index;
+                       var endAngle = startAngle + (circumference * Math.PI);
+
+                       var resetModel = {
+                               x: this.chart.chart.width / 2,
+                               y: this.chart.chart.height / 2,
+                               innerRadius: 0,
+                               outerRadius: this.chart.options.animateScale ? 0 : this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]),
+                               startAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : startAngle,
+                               endAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : endAngle,
+
+                               backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
+                               hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
+                               borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
+                               borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
+
+                               label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index])
+                       };
+
+                       helpers.extend(arc, {
+                               // Utility
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index,
+
+                               // Desired view properties
+                               _model: reset ? resetModel : {
                                        x: this.chart.chart.width / 2,
                                        y: this.chart.chart.height / 2,
                                        innerRadius: 0,
-                                       outerRadius: 0,
-                                       startAngle: Math.PI * -0.5,
-                                       endAngle: Math.PI * -0.5,
+                                       outerRadius: this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]),
+                                       startAngle: startAngle,
+                                       endAngle: endAngle,
 
                                        backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
                                        hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
@@ -97,40 +145,10 @@
                                        borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
 
                                        label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index])
-                               };
-
-                               var circumference = 1 / this.getDataset().data.length * 2;
-                               var startAngle = (-0.5 * Math.PI) + (Math.PI * circumference) * index;
-                               var endAngle = startAngle + (circumference * Math.PI);
-
-                               console.log()
-
-                               helpers.extend(arc, {
-                                       // Utility
-                                       _chart: this.chart.chart,
-                                       _datasetIndex: this.index,
-                                       _index: index,
-
-                                       // Desired view properties
-                                       _model: reset ? resetModel : {
-                                               x: this.chart.chart.width / 2,
-                                               y: this.chart.chart.height / 2,
-                                               innerRadius: 0,
-                                               outerRadius: this.chart.scale.getDistanceFromCenterForValue(this.getDataset().data[index]),
-                                               startAngle: startAngle,
-                                               endAngle: endAngle,
-
-                                               backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
-                                               hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
-                                               borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
-                                               borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
-
-                                               label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index])
-                                       },
-                               });
+                               },
+                       });
 
-                               arc.pivot();
-                       }, this);
+                       arc.pivot();
                },
 
                draw: function(ease) {
@@ -141,8 +159,6 @@
                        }, this);
                },
 
-
-
                setHoverStyle: function(arc) {
                        var dataset = this.chart.data.datasets[arc._datasetIndex];
                        var index = arc._index;
Mirror of https://github.com/chartjs/Chart.js.git