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 34346bc08c0a0ca906ec34e51a527812221ad10e..adf1e33ae464cf5b17b71a9a7afeca622cd36631 100644 (file)
--- 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 679104c6953f01d861dbec6b6aecd36f4c9fa06c..7e8d8ae3eba27d2c7c84ae9e8e7dff47dfdd2eb1 100644 (file)
--- 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 47e4a21125e549adf50246eeb700ba77c09c469c..ba7fdf70341909806a7428b037ea9878c74656b4 100644 (file)
--- 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);