From: Evert Timberg <evert.timberg@gmail.com>
Date: Sun, 15 Mar 2015 18:32:59 +0000 (-0400)
Subject: Draw bar chart negative values down from the 0 point of the scale. If all values... 
X-Git-Tag: v2.0-alpha~27^2^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ae7552a916c91283b829868e37a774855b89e46e;p=thirdparty%2FChart.js.git

Draw bar chart negative values down from the 0 point of the scale. If all values are negative, draw down from the top. Updated the sample file to allow for negative bars.
---

diff --git a/samples/bar.html b/samples/bar.html
index 5bf4b5bae..1b1166a22 100644
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -11,7 +11,7 @@
 
 
 	<script>
-	var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+	var randomScalingFactor = function(){ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random()*100)};
 
 	var barChartData = {
 		labels : ["January","February","March","April","May","June","July"],
@@ -36,7 +36,8 @@
 	window.onload = function(){
 		var ctx = document.getElementById("canvas").getContext("2d");
 		window.myBar = new Chart(ctx).Bar(barChartData, {
-			responsive : true
+			responsive : true,
+			scaleBeginAtZero: false,
 		});
 	}
 
diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index 87fb26ddc..7147c1553 100644
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -126,19 +126,38 @@
 
 			this.buildScale(data.labels);
 
-			this.BarClass.prototype.base = this.scale.endPoint;
+			this.BarClass.prototype.base = this.calculateBarBase();
 
 			this.eachBars(function(bar, index, datasetIndex){
 				helpers.extend(bar, {
 					width : this.scale.calculateBarWidth(this.datasets.length),
 					x: this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-					y: this.scale.endPoint
+					y: this.calculateBarBase() // so that we animate from the baseline
 				});
 				bar.save();
 			}, this);
 
 			this.render();
 		},
+		// Calculate the base point for the bar.
+		// If the scale has a 0 point, use that as the base
+		// If the scale min and max are both positive, use the bottom as a base
+		// If the scale min and max are both negative, use the top as a base
+		calculateBarBase: function() {
+			var base = this.scale.endPoint;
+			
+			if (this.scale.beginAtZero || Math.sign(this.scale.min) != Math.sign(this.scale.max))
+			{
+				base = this.scale.calculateY(0);
+			}
+			else if (Math.sign(this.scale.min) < 0 && Math.sign(this.scale.max) < 0)
+			{
+				// All values are negative. Use the top as the base
+				base = this.scale.startPoint;
+			}
+			
+			return base;
+		},
 		update : function(){
 			this.scale.update();
 			// Reset any highlight colours before updating.
@@ -241,9 +260,9 @@
 					value : value,
 					label : label,
 					x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
-					y: this.scale.endPoint,
+					y: this.calculateBarBase(), // so that we animate from the 0 point
 					width : this.scale.calculateBarWidth(this.datasets.length),
-					base : this.scale.endPoint,
+					base : this.calculateBarBase(),
 					strokeColor : this.datasets[datasetIndex].strokeColor,
 					fillColor : this.datasets[datasetIndex].fillColor
 				}));
@@ -263,8 +282,8 @@
 		},
 		reflow : function(){
 			helpers.extend(this.BarClass.prototype,{
-				y: this.scale.endPoint,
-				base : this.scale.endPoint
+				y: this.calculateBarBase(), // so that we animate from the baseline
+				base : this.calculateBarBase()
 			});
 			var newScaleProps = helpers.extend({
 				height : this.chart.height,
@@ -284,7 +303,8 @@
 			helpers.each(this.datasets,function(dataset,datasetIndex){
 				helpers.each(dataset.bars,function(bar,index){
 					if (bar.hasValue()){
-						bar.base = this.scale.endPoint;
+						bar.base = this.calculateBarBase()
+						
 						//Transition then draw
 						bar.transition({
 							x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 5dccd2ef9..b05b6b971 100755
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -1279,7 +1279,14 @@
 			return this.base - this.y;
 		},
 		inRange : function(chartX,chartY){
-			return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base);
+			if (this.y < this.base)
+			{
+				return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base);
+			}
+			else
+			{
+				return (chartX >= this.x - this.width / 2 && chartX <= this.x + this.width / 2) && (chartY >= this.base && chartY <= this.y);
+			}
 		}
 	});