Implement dataset.order

docs/charts/mixed.md

@@ -70,3 +70,29 @@ At this point we have a chart rendering how we'd like. It's important to note th
     }
 }
 {% endchartjs %}
+
+ ## Drawing order
+
+ By default, datasets are drawn so that first one is topmost. This can be altered by specifying `order` option to datasets. `order` defaults to `0`.
+
+ ```javascript
+var mixedChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        datasets: [{
+            label: 'Bar Dataset',
+            data: [10, 20, 30, 40]
+            // this dataset is drawn below
+            order: 1
+        }, {
+            label: 'Line Dataset',
+            data: [10, 10, 10, 10],
+            type: 'line',
+            // this dataset is drawn on top
+            order: 2
+        }],
+        labels: ['January', 'February', 'March', 'April']
+    },
+    options: options
+});
+```

src/core/core.controller.js

@@ -405,6 +405,8 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 				meta = me.getDatasetMeta(datasetIndex);
 			}
 			meta.type = type;
+			meta.order = dataset.order || 0;
+			meta.index = datasetIndex;
 
 			if (meta.controller) {
 				meta.controller.updateIndex(datasetIndex);
@@ -695,23 +697,46 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 		me.tooltip.transition(easingValue);
 	},
 
+	/**
+	 * @private
+	 */
+	_getSortedVisibleDatasetMetas: function() {
+		var me = this;
+		var datasets = me.data.datasets || [];
+		var result = [];
+		var i, ilen;
+
+		for (i = 0, ilen = datasets.length; i < ilen; ++i) {
+			if (me.isDatasetVisible(i)) {
+				result.push(me.getDatasetMeta(i));
+			}
+		}
+
+		result.sort(function(a, b) {
+			return a.order === b.order
+				? b.index - a.index
+				: a.order - b.order;
+		});
+
+		return result;
+	},
+
 	/**
 	 * Draws all datasets unless a plugin returns `false` to the `beforeDatasetsDraw`
 	 * hook, in which case, plugins will not be called on `afterDatasetsDraw`.
 	 * @private
 	 */
 	drawDatasets: function(easingValue) {
 		var me = this;
+		var metasets, i, ilen;
 
 		if (plugins.notify(me, 'beforeDatasetsDraw', [easingValue]) === false) {
 			return;
 		}
 
-		// Draw datasets reversed to support proper line stacking
-		for (var i = (me.data.datasets || []).length - 1; i >= 0; --i) {
-			if (me.isDatasetVisible(i)) {
-				me.drawDataset(i, easingValue);
-			}
+		metasets = me._getSortedVisibleDatasetMetas();
+		for (i = 0, ilen = metasets.length; i < ilen; ++i) {
+			me.drawDataset(metasets[i], easingValue);
 		}
 
 		plugins.notify(me, 'afterDatasetsDraw', [easingValue]);
@@ -722,12 +747,11 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 	 * hook, in which case, plugins will not be called on `afterDatasetDraw`.
 	 * @private
 	 */
-	drawDataset: function(index, easingValue) {
+	drawDataset: function(meta, easingValue) {
 		var me = this;
-		var meta = me.getDatasetMeta(index);
 		var args = {
 			meta: meta,
-			index: index,
+			index: meta.index,
 			easingValue: easingValue
 		};
 
@@ -807,7 +831,9 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 				controller: null,
 				hidden: null,			// See isDatasetVisible() comment
 				xAxisID: null,
-				yAxisID: null
+				yAxisID: null,
+				order: dataset.order || 0,
+				index: datasetIndex
 			};
 		}
 

src/plugins/plugin.filler.js

@@ -349,12 +349,12 @@ module.exports = {
 	},
 
 	beforeDatasetsDraw: function(chart) {
-		var count = (chart.data.datasets || []).length - 1;
+		var metasets = chart._getSortedVisibleDatasetMetas();
 		var ctx = chart.ctx;
-		var meta, i, el, view, points, mapper, color;
+		var meta, i, ilen, el, view, points, mapper, color;
 
-		for (i = count; i >= 0; --i) {
-			meta = chart.getDatasetMeta(i).$filler;
+		for (i = 0, ilen = metasets.length; i < ilen; ++i) {
+			meta = metasets[i].$filler;
 
 			if (!meta || !meta.visible) {
 				continue;

test/fixtures/controller.line/fill/order-default.js

@@ -0,0 +1,45 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [3, 1, 2, 0, 8, 1],
+					backgroundColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 4, 2, 6, 4, 8],
+					backgroundColor: '#00ff00'
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: true
+				},
+				point: {
+					radius: 0
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/fill/order.js

@@ -0,0 +1,46 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [3, 1, 2, 0, 8, 1],
+					backgroundColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [0, 4, 2, 6, 4, 8],
+					backgroundColor: '#00ff00',
+					order: 1
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: true
+				},
+				point: {
+					radius: 0
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};