Line chart addData and removeData implementations + sample file updates

diff --git a/samples/line.html b/samples/line.html
index b4d9bc4ee7237a55c6e24bc70da16c53ccaecc75..f4962480f4c43afd178caa7ff9173ec72475667c 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -21,6 +21,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 * (Math.random() > 0.5 ? -1 : 1));
@@ -74,8 +76,12 @@
     };
 
     $('#randomizeData').click(function() {
-        config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
-        config.data.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+        $.each(config.data.datasets, function(i, dataset) {
+            dataset.data = dataset.data.map(function() {
+                return randomScalingFactor();
+            });
+
+        });
 
         window.myLine.update();
     });
@@ -88,15 +94,37 @@
             pointBorderColor: randomColor(0.7),
             pointBackgroundColor: randomColor(0.5),
             pointBorderWidth: 1,
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            data: [],
         };
 
+        for (var index = 0; index < config.data.labels.length; ++index) {
+            newDataset.data.push(randomScalingFactor());
+        }
+
         window.myLine.addDataset(newDataset);
     });
 
+    $('#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) {
+                window.myLine.addData(randomScalingFactor(), index);
+            }
+        }
+    });
+
     $('#removeDataset').click(function() {
         window.myLine.removeDataset(0);
     });
+
+    $('#removeData').click(function() {
+        config.data.labels.splice(-1, 1); // remove the label first
+
+        config.data.datasets.forEach(function(dataset, datasetIndex) {
+            window.myLine.removeData(datasetIndex, -1);
+        });
+    });
     </script>
 </body>
 

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index fa5518b43e1d28a1311d86ae0284d2fe63234a36..34680dc068a55b82cf57755a7efa7f9fa843c486 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -76,13 +76,32 @@
                                });
                        }, this);
                },
+               addElementAndReset: function(index) {
+                       this.getDataset().metaData = this.getDataset().metaData || [];
+                       var point = new Chart.elements.Point({
+                               _chart: this.chart.chart,
+                               _datasetIndex: this.index,
+                               _index: index,
+                       });
+
+                       // Reset the point
+                       this.updateElement(point, index, true);
+
+                       // Add to the points array
+                       this.getDataset().metaData.splice(index, 0, point);
+
+                       // Make sure bezier control points are updated
+                       this.updateBezierControlPoints();
+               },
+               removeElement: function(index) {
+                       this.getDataset().metaData.splice(index, 1);
+               },
 
                reset: function() {
                        this.update(true);
                },
 
                update: function(reset) {
-
                        var line = this.getDataset().metaDataset;
                        var points = this.getDataset().metaData;
 
@@ -98,7 +117,6 @@
                                scaleBase = yScale.getPixelForValue(0);
                        }
 
-
                        // Update Line
                        helpers.extend(line, {
                                // Utility
@@ -126,33 +144,52 @@
 
                        // Update Points
                        helpers.each(points, function(point, index) {
-                               helpers.extend(point, {
-                                       // Utility
-                                       _chart: this.chart.chart,
-                                       _xScale: xScale,
-                                       _yScale: yScale,
-                                       _datasetIndex: this.index,
-                                       _index: index,
+                               this.updateElement(point, index, reset);
+                       }, this);
 
-                                       // Desired view properties
-                                       _model: {
-                                               x: xScale.getPointPixelForValue(this.getDataset().data[index], index, this.index),
-                                               y: reset ? scaleBase : yScale.getPointPixelForValue(this.getDataset().data[index], index, this.index),
-                                               // Appearance
-                                               tension: point.custom && point.custom.tension ? point.custom.tension : this.chart.options.elements.line.tension,
-                                               radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
-                                               backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
-                                               borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
-                                               borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
-                                               skip: point.custom && point.custom.skip ? point.custom.skip : this.getDataset().data[index] === null,
-
-                                               // Tooltip
-                                               hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
-                                       },
+                       this.updateBezierControlPoints();
+               },
 
-                               });
-                       }, this);
+               updateElement: function(point, index, reset) {
+                       var yScale = this.getScaleForId(this.getDataset().yAxisID);
+                       var xScale = this.getScaleForId(this.getDataset().xAxisID);
+                       var scaleBase;
+
+                       if (yScale.min < 0 && yScale.max < 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.max);
+                       } else if (yScale.min > 0 && yScale.max > 0) {
+                               scaleBase = yScale.getPixelForValue(yScale.min);
+                       } else {
+                               scaleBase = yScale.getPixelForValue(0);
+                       }
+
+                       helpers.extend(point, {
+                               // Utility
+                               _chart: this.chart.chart,
+                               _xScale: xScale,
+                               _yScale: yScale,
+                               _datasetIndex: this.index,
+                               _index: index,
+
+                               // Desired view properties
+                               _model: {
+                                       x: xScale.getPointPixelForValue(this.getDataset().data[index], index, this.index),
+                                       y: reset ? scaleBase : yScale.getPointPixelForValue(this.getDataset().data[index], index, this.index),
+                                       // Appearance
+                                       tension: point.custom && point.custom.tension ? point.custom.tension : this.chart.options.elements.line.tension,
+                                       radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
+                                       backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
+                                       borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
+                                       borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
+                                       skip: point.custom && point.custom.skip ? point.custom.skip : this.getDataset().data[index] === null,
+
+                                       // Tooltip
+                                       hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
+                               },
+                       });
+               },
 
+               updateBezierControlPoints: function() {
                        // Update bezier control points
                        helpers.each(this.getDataset().metaData, function(point, index) {
                                var controlPoints = helpers.splineCurve(
@@ -167,7 +204,7 @@
 
                                // Prevent the bezier going outside of the bounds of the graph
 
-                               // Cap puter bezier handles to the upper/lower scale bounds
+                               // Cap outer bezier handles to the upper/lower scale bounds
                                if (controlPoints.next.y > this.chart.chartArea.bottom) {
                                        point._model.controlPointNextY = this.chart.chartArea.bottom;
                                } else if (controlPoints.next.y < this.chart.chartArea.top) {
@@ -188,7 +225,6 @@
                                // Now pivot the point for animation
                                point.pivot();
                        }, this);
-
                },
 
                draw: function(ease) {