Reset elements for bar charts. Bar multi axis demo also shows different colours for...

diff --git a/samples/bar-multi-axis.html b/samples/bar-multi-axis.html
index 6ae6eca459055a0e06f535853b47ea995ff65b66..b8c3a384d3b3ec0d5653c296cba6ac5424005e5a 100644 (file)
--- a/samples/bar-multi-axis.html
+++ b/samples/bar-multi-axis.html
@@ -19,6 +19,9 @@
     var randomColorFactor = function() {
         return Math.round(Math.random() * 255);
     };
+    var randomColor = function() {
+        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+    };
 
     var barChartData = {
         labels: ["January", "February", "March", "April", "May", "June", "July"],
@@ -34,7 +37,7 @@
             data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
         }, {
             label: 'Dataset 3',
-            backgroundColor: "rgba(151,187,205,0.5)",
+            backgroundColor: [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()],
             yAxisID: "y-axis-1",
             data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
         }]
@@ -120,7 +123,12 @@
 
     $('#randomizeData').click(function() {
         $.each(barChartData.datasets, function(i, dataset) {
-            dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+            if (Chart.helpers.isArray(dataset.backgroundColor)) {
+                dataset.backgroundColor= [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()];
+            } else {
+                dataset.backgroundColor= randomColor();
+            }
+
             dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
 
         });

diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index 77e3de3548a1c5c805ef9367691ddbe2bc665b38..e15260dc4236e0240bb4567464b7018a5df7ca70 100644 (file)
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -124,9 +124,60 @@
                 _options: this.options,
             }, this);
 
+            // Need to fit scales before we reset elements. 
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            // So that we animate from the baseline
+            this.resetElements();
+
             // Update the chart with the latest data.
             this.update();
         },
+        resetElements: function() {
+            // Update the points
+            this.eachElement(function(bar, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+                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(bar, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.calculateBarX(this.data.datasets.length, datasetIndex, index),
+                        y: yScalePoint,
+
+                        // Appearance
+                        base: yScale.calculateBarBase(datasetIndex, index),
+                        width: xScale.calculateBarWidth(this.data.datasets.length),
+                        backgroundColor: bar.custom && bar.custom.backgroundColor ? bar.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].backgroundColor, index, this.options.elements.bar.backgroundColor),
+                        borderColor: bar.custom && bar.custom.borderColor ? bar.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderColor, index, this.options.elements.bar.borderColor),
+                        borderWidth: bar.custom && bar.custom.borderWidth ? bar.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderWidth, index, this.options.elements.bar.borderWidth),
+
+                        // Tooltip
+                        label: this.data.labels[index],
+                        datasetLabel: this.data.datasets[datasetIndex].label,
+                    },
+                });
+                bar.pivot();
+            }, this);
+        },
         update: function() {
             // Update the scale sizes
             Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);