Merge pull request #1887 from mathiask88/v2.0-dev

Add option to disable line drawing

docs/02-Line-Chart.md

@@ -120,6 +120,7 @@ The default options for line chart are defined in `Chart.defaults.Line`.
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+showLines | Boolean | true | If false, the lines between points are not drawn
 stacked | Boolean | false | If true, lines stack on top of each other along the y axis.
 *hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset.
 scales | - | - | -

src/controllers/controller.line.js

@@ -7,6 +7,8 @@
 		helpers = Chart.helpers;
 
 	Chart.defaults.line = {
+		showLines: true,
+
 		hover: {
 			mode: "label"
 		},
@@ -58,7 +60,8 @@
 			this.getDataset().metaData.splice(index, 0, point);
 
 			// Make sure bezier control points are updated
-			this.updateBezierControlPoints();
+			if (this.chart.options.showLines)
+				this.updateBezierControlPoints();
 		},
 
 		update: function update(reset) {
@@ -78,38 +81,41 @@
 			}
 
 			// Update Line
-			helpers.extend(line, {
+			if (this.chart.options.showLines) {
-				// Utility
+				helpers.extend(line, {
-				_scale: yScale,
+					// Utility
-				_datasetIndex: this.index,
+					_scale: yScale,
-				// Data
+					_datasetIndex: this.index,
-				_children: points,
+					// Data
-				// Model
+					_children: points,
-				_model: {
+					// Model
-					// Appearance
+					_model: {
-					tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+						// Appearance
-					backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
+						tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
-					borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
+						backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
-					borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
+						borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
-					borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
+						borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
-					borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
+						borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
-					borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
+						borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
-					borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
+						borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
-					fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
+						borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
-					// Scale
+						fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
-					scaleTop: yScale.top,
+						// Scale
-					scaleBottom: yScale.bottom,
+						scaleTop: yScale.top,
-					scaleZero: scaleBase,
+						scaleBottom: yScale.bottom,
-				},
+						scaleZero: scaleBase,
-			});
+					},
-			line.pivot();
+				});
+				line.pivot();
+			}
 
 			// Update Points
 			helpers.each(points, function(point, index) {
 				this.updateElement(point, index, reset);
 			}, this);
 
-			this.updateBezierControlPoints();
+			if (this.chart.options.showLines)
+				this.updateBezierControlPoints();
 		},
 
 		getPointBackgroundColor: function(point, index) {
@@ -258,7 +264,8 @@
 			}, this);
 
 			// Transition and Draw the line
-			this.getDataset().metaDataset.transition(easingDecimal).draw();
+			if (this.chart.options.showLines)
+				this.getDataset().metaDataset.transition(easingDecimal).draw();
 
 			// Draw the points
 			helpers.each(this.getDataset().metaData, function(point) {

test/controller.line.tests.js

@@ -87,6 +87,7 @@ describe('Line controller tests', function() {
 				type: 'line'
 			},
 			options: {
+				showLines: true,
 				scales: {
 					xAxes: [{
 						id: 'firstXScaleID'
@@ -114,6 +115,45 @@ describe('Line controller tests', function() {
 		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
 	});
 
+	it('should draw all elements except lines', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: false,
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			}
+		};
+
+		var controller = new Chart.controllers.line(chart, 0);
+
+		spyOn(chart.data.datasets[0].metaDataset, 'draw');
+		spyOn(chart.data.datasets[0].metaData[0], 'draw');
+		spyOn(chart.data.datasets[0].metaData[1], 'draw');
+		spyOn(chart.data.datasets[0].metaData[2], 'draw');
+		spyOn(chart.data.datasets[0].metaData[3], 'draw');
+
+		controller.draw();
+
+		expect(chart.data.datasets[0].metaDataset.draw.calls.count()).toBe(0);
+		expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
+	});
+
 	it('should update elements', function() {
 		var data = {
 			datasets: [{
@@ -177,6 +217,7 @@ describe('Line controller tests', function() {
 				type: 'line'
 			},
 			options: {
+				showLines: true,
 				elements: {
 					line: {
 						backgroundColor: 'rgb(255, 0, 0)',