addData is now supported by the doughnut chart + updated the sample to match.

diff --git a/samples/doughnut.html b/samples/doughnut.html
index f2746557a2609958ddb7977ed10b90abcd7705a3..f2c4282f848409b3fe35869f5660390e9a996f14 100644 (file)
--- a/samples/doughnut.html
+++ b/samples/doughnut.html
@@ -24,6 +24,8 @@
     <button id="randomizeData">Randomize Data</button>
     <button id="addDataset">Add Dataset</button>
     <button id="removeDataset">Remove Dataset</button>
+    <button id="addData">Add Data</button>
+    <button id="removeData">Remove Data</button>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -104,26 +106,54 @@
     };
 
     $('#randomizeData').click(function() {
-        $.each(config.data.datasets, function(i, piece) {
-            $.each(piece.data, function(j, value) {
-                config.data.datasets[i].data[j] = randomScalingFactor();
+        $.each(config.data.datasets, function(i, dataset) {
+            dataset.data = dataset.data.map(function() {
+                return randomScalingFactor();
+            });
+
+            dataset.backgroundColor = dataset.backgroundColor.map(function() {
+                return randomColor(0.7);
             });
         });
+
         window.myDoughnut.update();
     });
 
     $('#addDataset').click(function() {
         var newDataset = {
-            backgroundColor: [randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7)],
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            backgroundColor: [],
+            data: [],
         };
 
+        for (var index = 0; index < config.data.labels.length; ++index) {
+            newDataset.data.push(randomScalingFactor());
+            newDataset.backgroundColor.push(randomColor(0.7));
+        }
+
         window.myDoughnut.addDataset(newDataset);
     });
 
+    $('#addData').click(function() {
+        if (config.data.datasets.length > 0) {
+            config.data.labels.push('data #' + config.data.labels.length);
+
+            $.each(config.data.datasets, function(index, dataset) {
+                window.myDoughnut.addData(randomScalingFactor(), index, dataset.data.length, randomColor(0.7));
+            });
+        }
+    });
+
     $('#removeDataset').click(function() {
         window.myDoughnut.removeDataset(0);
     });
+
+    $('#removeData').click(function() {
+        config.data.labels.splice(-1, 1); // remove the label first
+
+        config.data.datasets.forEach(function(dataset, datasetIndex) {
+            window.myDoughnut.removeData(datasetIndex, -1);
+        });
+    });
     </script>
 </body>
 

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index dc8cbdc352be3609459a2e26a20aab70238d5990..454ec5498994dbd7ca71e17c4c3c67de447b0a55 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -63,7 +63,25 @@
                                });
                        }, this);
                },
+               addElementAndReset: function(index, colorForNewElement) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var arc = new Chart.elements.Arc({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index,
+                       });
+
+                       this.getDataset().backgroundColor.splice(index, 0, colorForNewElement);
 
+                       // 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);
                },
@@ -84,58 +102,60 @@
                        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 resetModel = {
+                               x: this.chart.chart.width / 2,
+                               y: this.chart.chart.height / 2,
+                               startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
+                               circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
+                               outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
+                               innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius,
+                       };
+
+                       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,
-                                       startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
-                                       circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
-                                       outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
-                                       innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius,
-                               };
-
-                               helpers.extend(arc, {
-                                       // Utility
-                                       _chart: this.chart.chart,
-                                       _datasetIndex: this.index,
-                                       _index: index,
+                                       circumference: this.calculateCircumference(this.getDataset().data[index]),
+                                       outerRadius: this.outerRadius,
+                                       innerRadius: this.innerRadius,
 
-                                       // Desired view properties
-                                       _model: reset ? resetModel : {
-                                               x: this.chart.chart.width / 2,
-                                               y: this.chart.chart.height / 2,
-                                               circumference: this.calculateCircumference(this.getDataset().data[index]),
-                                               outerRadius: this.outerRadius,
-                                               innerRadius: this.innerRadius,
-
-                                               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.getDataset().label, index, this.chart.data.labels[index])
-                                       },
-                               });
+                                       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),
 
-                               if (!reset) {
+                                       label: helpers.getValueAtIndexOrDefault(this.getDataset().label, index, this.chart.data.labels[index])
+                               },
+                       });
 
-                                       if (index === 0) {
-                                               arc._model.startAngle = Math.PI * -0.5; // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
-                                       } else {
-                                               arc._model.startAngle = this.getDataset().metaData[index - 1]._model.endAngle;
-                                       }
+                       if (!reset) {
 
-                                       arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
+                               if (index === 0) {
+                                       arc._model.startAngle = Math.PI * -0.5; // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
+                               } else {
+                                       arc._model.startAngle = this.getDataset().metaData[index - 1]._model.endAngle;
+                               }
+
+                               arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
 
 
-                                       //Check to see if it's the last arc, if not get the next and update its start angle
-                                       if (index < this.getDataset().data.length - 1) {
-                                               this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
-                                       }
+                               //Check to see if it's the last arc, if not get the next and update its start angle
+                               if (index < this.getDataset().data.length - 1) {
+                                       this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
                                }
+                       }
 
-                               arc.pivot();
-                       }, this);
+                       arc.pivot();
                },
 
                draw: function(ease) {

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 94df818a6f5b4b7de8f9a7d4e704d14fda5968bd..439fe523042b24fc31c959c54e4a6e55ce7446f4 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -102,8 +102,13 @@
                                        index = this.data.datasets[datasetIndex].data.length;
                                }
 
+                               var addElementArgs = [index];
+                               for (var i = 3; i < arguments.length; ++i) {
+                                       addElementArgs.push(arguments[i]);
+                               }
+
                                this.data.datasets[datasetIndex].data.splice(index, 0, data);
-                               this.data.datasets[datasetIndex].controller.addElementAndReset(index);
+                               this.data.datasets[datasetIndex].controller.addElementAndReset.apply(this.data.datasets[datasetIndex].controller, addElementArgs);
                                this.update();
                        }
                },