diff --git a/samples/bar-multi-axis.html b/samples/bar-multi-axis.html index 6ae6eca45..b8c3a384d 100644 --- 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 77e3de354..e15260dc4 100644 --- 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);