Add and remove data for bar charts

diff --git a/samples/bar.html b/samples/bar.html
index d79d082c7b49cecd1585203af3e8568ed5ee00e9..1d085208e4ce4385f634d7651ec707bff55fedc6 100644 (file)
--- 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 e4f7fa918cb67ceaf52419a85b3864e5c28cb4d4..c68d478c5e13f4e6b90a501f74ef902b781b8899 100644 (file)
--- 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;
-
-                               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,
-
-
-                                       // 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,
+                       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);
+                       }
 
-                                               // 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);
+                       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),
+
+                                       // 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();
                },
 
                draw: function(ease) {

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 1d098e8907db884789ba3c8593987365fece9f57..312de25b5b0e80b2b81ce9e01e29814727fddfcf 100644 (file)
--- 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,