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

2026-03-04 15:34:04 +01:00 · 2015-06-19 19:51:28 -04:00
parent 2dd49f0c92
commit 46af76a8ed
3 changed files with 104 additions and 49 deletions
--- 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>

--- 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) {
+				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,
+			};

-				var resetModel = {
+			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,
-				};
+					circumference: this.calculateCircumference(this.getDataset().data[index]),
+					outerRadius: this.outerRadius,
+					innerRadius: this.innerRadius,

-				helpers.extend(arc, {
-					// Utility
-					_chart: this.chart.chart,
-					_datasetIndex: this.index,
-					_index: 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),

-					// 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,
+					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 (!reset) {
-
-					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;
-					}
+				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.pivot();
-			}, this);
+				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;
+				}
+			}
+
+			arc.pivot();
 		},

 		draw: function(ease) {
--- 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();
 			}
 		},