From 7796c4e87dc671ad5fd983388933028a2fee7f10 Mon Sep 17 00:00:00 2001
From: Evert Timberg <evert.timberg@gmail.com>
Date: Wed, 17 Jun 2015 22:03:24 -0400
Subject: [PATCH] Add and remove data for bar charts

---
 samples/bar.html                  | 32 ++++++++++--
 src/controllers/controller.bar.js | 85 ++++++++++++++++++-------------
 src/core/core.controller.js       | 24 +++++++++
 3 files changed, 103 insertions(+), 38 deletions(-)

diff --git a/samples/bar.html b/samples/bar.html
index d79d082c7..1d085208e 100644
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -14,6 +14,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.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
@@ -54,10 +56,12 @@
     };
 
     $('#randomizeData').click(function() {
-        var zero = Math.random() < 0.2 ? [0, 0, 0, 0, 0, 0, 0] : false;
+        var zero = Math.random() < 0.2 ? true : false;
         $.each(barChartData.datasets, function(i, dataset) {
             dataset.backgroundColor = randomColor();
-            dataset.data = zero || [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+            dataset.data = dataset.data.map(function() {
+                return zero ? 0.0 : randomScalingFactor();
+            });
 
         });
         window.myBar.update();
@@ -67,15 +71,37 @@
         var newDataset = {
             label: 'Dataset ' + barChartData.datasets.length,
             backgroundColor: randomColor(),
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            data: []
         };
 
+        for (var index = 0; index < barChartData.labels.length; ++index) {
+            newDataset.data.push(randomScalingFactor());
+        }
+
         window.myBar.addDataset(newDataset, 1);
     });
 
+    $('#addData').click(function() {
+        if (barChartData.datasets.length > 0) {
+            barChartData.labels.push('dataset #' + barChartData.labels.length);
+
+            for (var index = 0; index < barChartData.datasets.length; ++index) {
+                window.myBar.addData(randomScalingFactor(), index);
+            }
+        }
+    });
+
     $('#removeDataset').click(function() {
         window.myBar.removeDataset(0);
     });
+
+    $('#removeData').click(function() {
+        barChartData.labels.splice(-1, 1); // remove the label first
+
+        barChartData.datasets.forEach(function(dataset, datasetIndex) {
+            window.myBar.removeData(datasetIndex, -1);
+        });
+    });
     </script>
 </body>
 
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index e4f7fa918..c68d478c5 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -71,56 +71,71 @@
 				});
 			}, this);
 		},
+		addElementAndReset: function(index) {
+			this.getDataset().metaData = this.getDataset().metaData || [];
+			var rectangle = new Chart.elements.Rectangle({
+				_chart: this.chart.chart,
+				_datasetIndex: this.index,
+				_index: index,
+			});
+			this.updateElement(rectangle, index, true);
+			this.getDataset().metaData.splice(index, 0, rectangle);
+		},
+		removeElement: function(index) {
+			this.getDataset().metaData.splice(index, 1);
+		},
 
 		reset: function() {
 			this.update(true);
 		},
 
 		update: function(reset) {
+			helpers.each(this.getDataset().metaData, function(rectangle, index) {
+				this.updateElement(rectangle, index, reset);
+			}, this);
+		},
 
+		updateElement: function updateElement(rectangle, index, reset) {
 			var xScale = this.getScaleForId(this.getDataset().xAxisID);
 			var yScale = this.getScaleForId(this.getDataset().yAxisID);
-			helpers.each(this.getDataset().metaData, function(rectangle, index) {
+			var yScalePoint;
 
-				var yScalePoint;
+			if (yScale.min < 0 && yScale.max < 0) {
+				// all less than 0. use the top
+				yScalePoint = yScale.getPixelForValue(yScale.max);
+			} else if (yScale.min > 0 && yScale.max > 0) {
+				yScalePoint = yScale.getPixelForValue(yScale.min);
+			} else {
+				yScalePoint = yScale.getPixelForValue(0);
+			}
 
-				if (yScale.min < 0 && yScale.max < 0) {
-					// all less than 0. use the top
-					yScalePoint = yScale.getPixelForValue(yScale.max);
-				} else if (yScale.min > 0 && yScale.max > 0) {
-					yScalePoint = yScale.getPixelForValue(yScale.min);
-				} else {
-					yScalePoint = yScale.getPixelForValue(0);
-				}
-
-				helpers.extend(rectangle, {
-					// Utility
-					_chart: this.chart.chart,
-					_xScale: xScale,
-					_yScale: yScale,
-					_datasetIndex: this.index,
-					_index: index,
+			helpers.extend(rectangle, {
+				// Utility
+				_chart: this.chart.chart,
+				_xScale: xScale,
+				_yScale: yScale,
+				_datasetIndex: this.index,
+				_index: index,
 
 
-					// Desired view properties
-					_model: {
-						x: xScale.calculateBarX(this.chart.data.datasets.length, this.index, index),
-						y: reset ? yScalePoint : yScale.calculateBarY(this.index, index),
+				// Desired view properties
+				_model: {
+					x: xScale.calculateBarX(this.chart.data.datasets.length, this.index, index),
+					y: reset ? yScalePoint : yScale.calculateBarY(this.index, index),
 
-						// Tooltip
-						label: this.chart.data.labels[index],
-						datasetLabel: this.getDataset().label,
+					// Tooltip
+					label: this.chart.data.labels[index],
+					datasetLabel: this.getDataset().label,
 
-						// Appearance
-						base: yScale.calculateBarBase(this.index, index),
-						width: xScale.calculateBarWidth(this.chart.data.datasets.length),
-						backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
-						borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
-						borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth),
-					},
-				});
-				rectangle.pivot();
-			}, this);
+					// Appearance
+					base: yScale.calculateBarBase(this.index, index),
+					width: xScale.calculateBarWidth(this.chart.data.datasets.length),
+					backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
+					borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
+					borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth),
+				},
+			});
+			rectangle.pivot();
 		},
 
 		draw: function(ease) {
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 1d098e890..312de25b5 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -92,6 +92,30 @@
 			this.update();
 		},
 
+		// Add data to the given dataset
+		// @param data: the data to add
+		// @param {Number} datasetIndex : the index of the dataset to add to
+		// @param {Number} index : the index of the data
+		addData: function addData(data, datasetIndex, index) {
+			if (datasetIndex < this.data.datasets.length) {
+				if (index === undefined) {
+					index = this.data.datasets[datasetIndex].data.length;
+				}
+				
+				this.data.datasets[datasetIndex].data.splice(index, 0, data);
+				this.data.datasets[datasetIndex].controller.addElementAndReset(index);
+				this.update();
+			}
+		},
+
+		removeData: function removeData(datasetIndex, index) {
+			if (datasetIndex < this.data.datasets.length) {
+				this.data.datasets[datasetIndex].data.splice(index, 1);
+				this.data.datasets[datasetIndex].controller.removeElement(index);
+				this.update();
+			}
+		},
+
 		resize: function resize(silent) {
 			this.stop();
 			var canvas = this.chart.canvas,