From: Ryan M. Poe <baublet@gmail.com>
Date: Tue, 7 Jun 2016 07:15:26 +0000 (-0400)
Subject: Refactor spanGaps for line graphs with sparse data (#2721)
X-Git-Tag: v2.1.5~11
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=77357e57d6f5ae44ba10bf22b06219850df4df5f;p=thirdparty%2FChart.js.git

Refactor spanGaps for line graphs with sparse data (#2721)

Fix #2435, this very slim patch (including its relevant documentation addition) adds a small option to line chart datasets (spanGaps) that allows users trying to graph sparse datasets to have lines between null entries drawn, rather than omitted.
---

diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md
index 34346bc08..adf1e33ae 100644
--- a/docs/03-Line-Chart.md
+++ b/docs/03-Line-Chart.md
@@ -58,6 +58,7 @@ pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovere
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
 pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`. 
 showLine | `Boolean` | If false, the line is not drawn for this dataset
+spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
 
 An example data object using these attributes is shown below.
 ```javascript
@@ -84,6 +85,7 @@ var data = {
 			pointRadius: 1,
 			pointHitRadius: 10,
 			data: [65, 59, 80, 81, 56, 55, 40],
+			spanGaps: false,
 		}
 	]
 };
@@ -94,6 +96,8 @@ The data for line charts is broken up into an array of datasets. Each dataset ha
 
 The label key on each dataset is optional, and can be used when generating a scale for the chart.
 
+When `spanGaps` is set to true, the gaps between points in sparse datasets are filled in. By default, it is off.
+
 ### Data Points
 
 The data passed to the chart can be passed in two formats. The most common method is to pass the data array as an array of numbers. In this case, the `data.labels` array must be specified and must contain a label for each point or, in the case of labels to be displayed over multiple lines an array of labels (one for each line) i.e `[["June","2015"], "July"]`.
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 679104c69..7e8d8ae3e 100644
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -75,6 +75,10 @@ module.exports = function(Chart) {
 				// Model
 				line._model = {
 					// Appearance
+					// The default behavior of lines is to break at null values, according
+					// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
+					// This option gives linse the ability to span gaps
+					spanGaps: dataset.spanGaps ? dataset.spanGaps : false,
 					tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
 					backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
 					borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index 47e4a2112..ba7fdf703 100644
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -21,10 +21,11 @@ module.exports = function(Chart) {
 		lineToNextPoint: function(previousPoint, point, nextPoint, skipHandler, previousSkipHandler) {
 			var me = this;
 			var ctx = me._chart.ctx;
+			var spanGaps = me._view ? me._view.spanGaps : false;
 
-			if (point._view.skip) {
+			if (point._view.skip && !spanGaps) {
 				skipHandler.call(me, previousPoint, point, nextPoint);
-			} else if (previousPoint._view.skip) {
+			} else if (previousPoint._view.skip && !spanGaps) {
 				previousSkipHandler.call(me, previousPoint, point, nextPoint);
 			} else if (point._view.tension === 0) {
 				ctx.lineTo(point._view.x, point._view.y);