Float-bar support. The logic is to use array values [bottomY, topY] i…

docs/charts/bar.md

@@ -16,7 +16,7 @@ A bar chart provides a way of showing data values represented as vertical bars.
         ],
         "datasets": [{
             "label": "My First Dataset",
-            "data": [65, 59, 80, 81, 56, 55, 40],
+            "data": [65, 59, 80, 81, 56, 55, 40, [10, 20]],
             "fill": false,
             "backgroundColor": [
                 "rgba(255, 99, 132, 0.2)",
@@ -86,6 +86,7 @@ Options are:
 * 'left'
 * 'top'
 * 'right'
+* false - in the case of floating bar chart we need to have all borders, so you can set var to false to draw all borders
 
 ## Configuration Options
 
@@ -146,10 +147,10 @@ Sample:     |==============|
 
 ## Data Structure
 
-The `data` property of a dataset for a bar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
-
+The `data` property of a dataset for a bar chart is specified as a an array of numbers or arrays. Each point in the data array corresponds to the label at the same index on the x axis.
+For floating bar chart you can use array for a specific Y value passing two numbers. First one will be used as min value and second one as max value for a bar.
 ```javascript
-data: [20, 10]
+data: [20, 10, [10, 20]]
 ```
 
 You can also specify the dataset as x/y coordinates when using the [time scale](../axes/cartesian/time.md#time-cartesian-axis).
@@ -196,7 +197,7 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
         "labels": ["January", "February", "March", "April", "May", "June", "July"],
         "datasets": [{
             "label": "My First Dataset",
-            "data": [65, 59, 80, 81, 56, 55, 40],
+            "data": [65, 59, 80, 81, 56, 55, 40, [10, 20]],
             "fill": false,
             "backgroundColor": [
                 "rgba(255, 99, 132, 0.2)",

src/controllers/controller.bar.js

@@ -219,6 +219,11 @@ module.exports = function(Chart) {
 			var custom = rectangle.custom || {};
 			var rectangleOptions = chart.options.elements.rectangle;
 
+			//  float-bar support, if y arguments are array lets override rectangles styles, assigning no skippingBorder
+			if (helpers.isArray(dataset.data[index])) {
+				custom.borderSkipped = null;
+			}
+
 			rectangle._xScale = me.getScaleForId(meta.xAxisID);
 			rectangle._yScale = me.getScaleForId(meta.yAxisID);
 			rectangle._datasetIndex = me.index;
@@ -227,7 +232,7 @@ module.exports = function(Chart) {
 			rectangle._model = {
 				datasetLabel: dataset.label,
 				label: chart.data.labels[index],
-				borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped,
+				borderSkipped: helpers.valueOrDefault(custom.borderSkipped, rectangleOptions.borderSkipped),
 				backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleOptions.backgroundColor),
 				borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor),
 				borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth)
@@ -383,11 +388,12 @@ module.exports = function(Chart) {
 			var meta = me.getMeta();
 			var scale = me.getValueScale();
 			var datasets = chart.data.datasets;
-			var value = scale.getRightValue(datasets[datasetIndex].data[index]);
+			var value = scale._parseValue(datasets[datasetIndex].data[index]);
 			var stacked = scale.options.stacked;
 			var stack = meta.stack;
-			var start = 0;
-			var i, imeta, ivalue, base, head, size;
+			var i, imeta, ivalue, base, head, size, yStackValue;
+			var start = value.max >= 0 && value.min >= 0 ? value.min : value.max;
+			var yValue = value.max >= 0 && value.min >= 0 ? value.max - value.min : value.min - value.max;
 
 			if (stacked || (stacked === undefined && stack !== undefined)) {
 				for (i = 0; i < datasetIndex; ++i) {
@@ -397,17 +403,18 @@ module.exports = function(Chart) {
 						imeta.stack === stack &&
 						imeta.controller.getValueScaleId() === scale.id &&
 						chart.isDatasetVisible(i)) {
+						yStackValue = scale._parseValue(datasets[i].data[index]);
+						ivalue = yStackValue.min >= 0 && yStackValue.max >= 0 ? yStackValue.max : yStackValue.min;
 
-						ivalue = scale.getRightValue(datasets[i].data[index]);
-						if ((value < 0 && ivalue < 0) || (value >= 0 && ivalue > 0)) {
+						if ((yValue < 0 && ivalue < 0) || (yValue >= 0 && ivalue >= 0)) {
 							start += ivalue;
 						}
 					}
 				}
 			}
 
 			base = scale.getPixelForValue(start);
-			head = scale.getPixelForValue(start + value);
+			head = scale.getPixelForValue(start + yValue);
 			size = (head - base) / 2;
 
 			return {
@@ -453,8 +460,10 @@ module.exports = function(Chart) {
 
 			helpers.canvas.clipArea(chart.ctx, chart.chartArea);
 
+			//  float-bar support, if y arguments are array function will use bottom value as bar start point
 			for (; i < ilen; ++i) {
-				if (!isNaN(scale.getRightValue(dataset.data[i]))) {
+				var val = scale._parseValue(dataset.data[i]);
+				if (!isNaN(val.start) && !isNaN(val.end)) {
 					rects[i].draw();
 				}
 			}

src/core/core.scale.js

@@ -514,14 +514,16 @@ module.exports = Element.extend({
 
 	// Get the correct value. NaN bad inputs, If the value type is object get the x or y based on whether we are horizontal or not
 	getRightValue: function(rawValue) {
-		// Null and undefined values first
-		if (helpers.isNullOrUndef(rawValue)) {
+		// Null and undefined values first. isNaN(object) returns true, so make sure NaN is checking for a number; Discard Infinite values
+		if (helpers.isNullOrUndef(rawValue) || (typeof rawValue === 'number' && !isFinite(rawValue))) {
 			return NaN;
 		}
-		// isNaN(object) returns true, so make sure NaN is checking for a number; Discard Infinite values
-		if (typeof rawValue === 'number' && !isFinite(rawValue)) {
-			return NaN;
+
+		// Float-bar support. Handling arrays
+		if (helpers.isArray(rawValue)) {
+			return [this.getRightValue(rawValue[0]), this.getRightValue(rawValue[1])];
 		}
+
 		// If it is in fact an object, dive in one more level
 		if (rawValue) {
 			if (this.isHorizontal()) {
@@ -537,6 +539,30 @@ module.exports = Element.extend({
 		return rawValue;
 	},
 
+	/**
+	 * @private
+	 * Parse array and generic values into object
+	 */
+	_parseValue: function(raw) {
+		var value = this.getRightValue(raw);
+		var start, end;
+
+		if (helpers.isArray(value)) {
+			start = value[0];
+			end = value[1];
+		} else {
+			start = 0;
+			end = value;
+		}
+
+		return {
+			min: Math.min(start, end),
+			max: Math.max(start, end),
+			start: start,
+			end: end
+		};
+	},
+
 	/**
 	 * Used to get the value to display in the tooltip for the data at the given index
 	 * @param index

src/core/core.tooltip.js

@@ -68,6 +68,7 @@ defaults._set('global', {
 				if (label) {
 					label += ': ';
 				}
+
 				label += tooltipItem.yLabel;
 				return label;
 			},

src/elements/element.rectangle.js

@@ -2,6 +2,7 @@
 
 var defaults = require('../core/core.defaults');
 var Element = require('../core/core.element');
+var helpers = require('../helpers/index');
 
 defaults._set('global', {
 	elements: {
@@ -67,7 +68,8 @@ module.exports = Element.extend({
 			bottom = vm.base;
 			signX = 1;
 			signY = bottom > top ? 1 : -1;
-			borderSkipped = vm.borderSkipped || 'bottom';
+			// no border support
+			borderSkipped = helpers.valueOrDefault(vm.borderSkipped, 'bottom');
 		} else {
 			// horizontal bar
 			left = vm.base;
@@ -76,7 +78,8 @@ module.exports = Element.extend({
 			bottom = vm.y + vm.height / 2;
 			signX = right > left ? 1 : -1;
 			signY = 1;
-			borderSkipped = vm.borderSkipped || 'left';
+			// no border support
+			borderSkipped = helpers.valueOrDefault(vm.borderSkipped, 'left');
 		}
 
 		// Canvas doesn't allow us to stroke inside the width so we can
@@ -132,8 +135,9 @@ module.exports = Element.extend({
 		// Draw rectangle from 'startCorner'
 		var corner = cornerAt(0);
 		ctx.moveTo(corner[0], corner[1]);
+		var cornersCount = borderSkipped === null ? 4 : 3;
 
-		for (var i = 1; i < 4; i++) {
+		for (var i = 1; i <= cornersCount; i++) {
 			corner = cornerAt(i);
 			ctx.lineTo(corner[0], corner[1]);
 		}

src/scales/scale.linear.js

@@ -74,20 +74,27 @@ module.exports = function(Chart) {
 
 					if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 						helpers.each(dataset.data, function(rawValue, index) {
-							var value = +me.getRightValue(rawValue);
-							if (isNaN(value) || meta.data[index].hidden) {
+							var value = me._parseValue(rawValue);
+
+							if (isNaN(value.min) || isNaN(value.max) || meta.data[index].hidden) {
 								return;
 							}
 
 							positiveValues[index] = positiveValues[index] || 0;
 							negativeValues[index] = negativeValues[index] || 0;
 
+							if (value.min === 0) {
+								value.min = value.max;
+							} else if (value.max === 0) {
+								value.max = value.min;
+							}
+
 							if (opts.relativePoints) {
 								positiveValues[index] = 100;
-							} else if (value < 0) {
-								negativeValues[index] += value;
+							} else if (value.min < 0) {
+								negativeValues[index] += value.min;
 							} else {
-								positiveValues[index] += value;
+								positiveValues[index] += value.max;
 							}
 						});
 					}
@@ -106,21 +113,28 @@ module.exports = function(Chart) {
 					var meta = chart.getDatasetMeta(datasetIndex);
 					if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 						helpers.each(dataset.data, function(rawValue, index) {
-							var value = +me.getRightValue(rawValue);
-							if (isNaN(value) || meta.data[index].hidden) {
+							var value = me._parseValue(rawValue);
+
+							if (isNaN(value.min) || isNaN(value.max) || meta.data[index].hidden) {
 								return;
 							}
 
+							if (value.min === 0) {
+								value.min = value.max;
+							} else if (value.max === 0) {
+								value.max = value.min;
+							}
+
 							if (me.min === null) {
-								me.min = value;
-							} else if (value < me.min) {
-								me.min = value;
+								me.min = value.min;
+							} else if (value.min < me.min) {
+								me.min = value.min;
 							}
 
 							if (me.max === null) {
-								me.max = value;
-							} else if (value > me.max) {
-								me.max = value;
+								me.max = value.max;
+							} else if (value.max > me.max) {
+								me.max = value.max;
 							}
 						});
 					}
@@ -156,7 +170,8 @@ module.exports = function(Chart) {
 			}
 		},
 		getLabelForIndex: function(index, datasetIndex) {
-			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
+			var v = this._parseValue(this.chart.data.datasets[datasetIndex].data[index]);
+			return v.start === 0 ? v.end : v.start + ' ; ' + v.end;
 		},
 		// Utils
 		getPixelForValue: function(value) {

src/scales/scale.logarithmic.js

@@ -68,7 +68,7 @@ module.exports = function(Chart) {
 		}
 	};
 
-	var LogarithmicScale = Scale.extend({
+	var LogarithmicScale = Chart.Scale.extend({
 		determineDataLimits: function() {
 			var me = this;
 			var opts = me.options;
@@ -119,13 +119,14 @@ module.exports = function(Chart) {
 
 						helpers.each(dataset.data, function(rawValue, index) {
 							var values = valuesPerStack[key];
-							var value = +me.getRightValue(rawValue);
+							var value = me._parseValue(rawValue);
+
 							// invalid, hidden and negative values are ignored
-							if (isNaN(value) || meta.data[index].hidden || value < 0) {
+							if (isNaN(value.max) || meta.data[index].hidden || value.max < 0) {
 								return;
 							}
 							values[index] = values[index] || 0;
-							values[index] += value;
+							values[index] += value.max;
 						});
 					}
 				});
@@ -144,26 +145,30 @@ module.exports = function(Chart) {
 					var meta = chart.getDatasetMeta(datasetIndex);
 					if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 						helpers.each(dataset.data, function(rawValue, index) {
-							var value = +me.getRightValue(rawValue);
+							var value = me._parseValue(rawValue);
 							// invalid, hidden and negative values are ignored
-							if (isNaN(value) || meta.data[index].hidden || value < 0) {
+							if (isNaN(value.min) || isNaN(value.max) || meta.data[index].hidden || value.min < 0 || value.max < 0) {
 								return;
 							}
 
+							if (value.min === 0) {
+								value.min = value.max;
+							}
+
 							if (me.min === null) {
-								me.min = value;
-							} else if (value < me.min) {
-								me.min = value;
+								me.min = value.min;
+							} else if (value.min < me.min) {
+								me.min = value.min;
 							}
 
 							if (me.max === null) {
-								me.max = value;
-							} else if (value > me.max) {
-								me.max = value;
+								me.max = value.max;
+							} else if (value.max > me.max) {
+								me.max = value.max;
 							}
 
-							if (value !== 0 && (me.minNotZero === null || value < me.minNotZero)) {
-								me.minNotZero = value;
+							if (value.min !== 0 && (me.minNotZero === null || value.min < me.minNotZero)) {
+								me.minNotZero = value.min;
 							}
 						});
 					}
@@ -247,7 +252,8 @@ module.exports = function(Chart) {
 		},
 		// Get the correct tooltip label
 		getLabelForIndex: function(index, datasetIndex) {
-			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
+			var v = this._parseValue(this.chart.data.datasets[datasetIndex].data[index]);
+			return v.start === 0 ? v.end : v.start + ' ; ' + v.end;
 		},
 		getPixelForTick: function(index) {
 			return this.getPixelForValue(this.tickValues[index]);