Support object values for bar charts

src/scales/scale.category.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var helpers = require('../helpers/index');
 var Scale = require('../core/core.scale');
 
 var defaultConfig = {
@@ -49,22 +50,28 @@ module.exports = Scale.extend({
 	},
 
 	// Used to get data value locations.  Value can either be an index or a numerical value
-	getPixelForValue: function(value, index) {
+	getPixelForValue: function(value, index, datasetIndex) {
 		var me = this;
 		var offset = me.options.offset;
+
 		// 1 is added because we need the length but we have the indexes
 		var offsetAmt = Math.max((me.maxIndex + 1 - me.minIndex - (offset ? 0 : 1)), 1);
 
+		var valueCategory, labels, idx;
+
+		if (index !== undefined && datasetIndex !== undefined) {
+			value = me.chart.data.datasets[datasetIndex].data[index];
+		}
+
 		// If value is a data object, then index is the index in the data array,
 		// not the index of the scale. We need to change that.
-		var valueCategory;
-		if (value !== undefined && value !== null) {
+		if (!helpers.isNullOrUndef(value)) {
 			valueCategory = me.isHorizontal() ? value.x : value.y;
 		}
 		if (valueCategory !== undefined || (value !== undefined && isNaN(index))) {
-			var labels = me._getLabels();
-			value = valueCategory || value;
-			var idx = labels.indexOf(value);
+			labels = me._getLabels();
+			value = helpers.valueOrDefault(valueCategory, value);
+			idx = labels.indexOf(value);
 			index = idx !== -1 ? idx : index;
 		}
 
@@ -89,7 +96,7 @@ module.exports = Scale.extend({
 	},
 
 	getPixelForTick: function(index) {
-		return this.getPixelForValue(this.ticks[index], index + this.minIndex, null);
+		return this.getPixelForValue(this.ticks[index], index + this.minIndex);
 	},
 
 	getValueForPixel: function(pixel) {

test/specs/scale.category.tests.js

@@ -390,4 +390,157 @@ describe('Category scale tests', function() {
 		expect(yScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(107);
 		expect(yScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(407);
 	});
+
+	it('Should get the correct pixel for an object value when horizontal', function() {
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				datasets: [{
+					xAxisID: 'xScale0',
+					yAxisID: 'yScale0',
+					data: [
+						{x: 0, y: 10},
+						{x: 1, y: 5},
+						{x: 2, y: 0},
+						{x: 3, y: 25},
+						{x: 0, y: 78}
+					]
+				}],
+				labels: [0, 1, 2, 3]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						id: 'xScale0',
+						type: 'category',
+						position: 'bottom'
+					}],
+					yAxes: [{
+						id: 'yScale0',
+						type: 'linear'
+					}]
+				}
+			}
+		});
+
+		var xScale = chart.scales.xScale0;
+		expect(xScale.getPixelForValue({x: 0, y: 10}, 0, 0)).toBeCloseToPixel(29);
+		expect(xScale.getPixelForValue({x: 3, y: 25}, 3, 0)).toBeCloseToPixel(506);
+		expect(xScale.getPixelForValue({x: 0, y: 78}, 4, 0)).toBeCloseToPixel(29);
+	});
+
+	it('Should get the correct pixel for an object value when vertical', function() {
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				datasets: [{
+					xAxisID: 'xScale0',
+					yAxisID: 'yScale0',
+					data: [
+						{x: 0, y: 2},
+						{x: 1, y: 4},
+						{x: 2, y: 0},
+						{x: 3, y: 3},
+						{x: 0, y: 1}
+					]
+				}],
+				labels: [0, 1, 2, 3],
+				yLabels: [0, 1, 2, 3, 4]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						id: 'xScale0',
+						type: 'category',
+						position: 'bottom'
+					}],
+					yAxes: [{
+						id: 'yScale0',
+						type: 'category',
+						position: 'left'
+					}]
+				}
+			}
+		});
+
+		var yScale = chart.scales.yScale0;
+		expect(yScale.getPixelForValue({x: 0, y: 2}, 0, 0)).toBeCloseToPixel(257);
+		expect(yScale.getPixelForValue({x: 0, y: 1}, 4, 0)).toBeCloseToPixel(144);
+	});
+
+	it('Should get the correct pixel for an object value in a bar chart', function() {
+		var chart = window.acquireChart({
+			type: 'bar',
+			data: {
+				datasets: [{
+					xAxisID: 'xScale0',
+					yAxisID: 'yScale0',
+					data: [
+						{x: 0, y: 10},
+						{x: 1, y: 5},
+						{x: 2, y: 0},
+						{x: 3, y: 25},
+						{x: 0, y: 78}
+					]
+				}],
+				labels: [0, 1, 2, 3]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						id: 'xScale0',
+						type: 'category',
+						position: 'bottom'
+					}],
+					yAxes: [{
+						id: 'yScale0',
+						type: 'linear'
+					}]
+				}
+			}
+		});
+
+		var xScale = chart.scales.xScale0;
+		expect(xScale.getPixelForValue(null, 0, 0)).toBeCloseToPixel(89);
+		expect(xScale.getPixelForValue(null, 3, 0)).toBeCloseToPixel(449);
+		expect(xScale.getPixelForValue(null, 4, 0)).toBeCloseToPixel(89);
+	});
+
+	it('Should get the correct pixel for an object value in a horizontal bar chart', function() {
+		var chart = window.acquireChart({
+			type: 'horizontalBar',
+			data: {
+				datasets: [{
+					xAxisID: 'xScale0',
+					yAxisID: 'yScale0',
+					data: [
+						{x: 10, y: 0},
+						{x: 5, y: 1},
+						{x: 0, y: 2},
+						{x: 25, y: 3},
+						{x: 78, y: 0}
+					]
+				}],
+				labels: [0, 1, 2, 3]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						id: 'xScale0',
+						type: 'linear',
+						position: 'bottom'
+					}],
+					yAxes: [{
+						id: 'yScale0',
+						type: 'category'
+					}]
+				}
+			}
+		});
+
+		var yScale = chart.scales.yScale0;
+		expect(yScale.getPixelForValue(null, 0, 0)).toBeCloseToPixel(88);
+		expect(yScale.getPixelForValue(null, 3, 0)).toBeCloseToPixel(426);
+		expect(yScale.getPixelForValue(null, 4, 0)).toBeCloseToPixel(88);
+	});
 });