Add option to disable line drawing

diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md
index 7f92c0dd6c08cc69e3eb4ae87bfc6edfcfb5049b..d3e89dcb34f2b69db32aedd080f412f0fcf4591a 100644 (file)
--- a/docs/02-Line-Chart.md
+++ b/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 | - | - | -

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 3e87c9532cd41aeeca83bce88198d13611b6217a..fcef8af47f8707f740f791d0a34e8143f2af0799 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/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, {
-                               // Utility
-                               _scale: yScale,
-                               _datasetIndex: this.index,
-                               // Data
-                               _children: points,
-                               // Model
-                               _model: {
-                                       // Appearance
-                                       tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
-                                       backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
-                                       borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
-                                       borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
-                                       borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
-                                       borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
-                                       borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
-                                       borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
-                                       fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
-                                       // Scale
-                                       scaleTop: yScale.top,
-                                       scaleBottom: yScale.bottom,
-                                       scaleZero: scaleBase,
-                               },
-                       });
-                       line.pivot();
+                       if (this.chart.options.showLines) {
+                               helpers.extend(line, {
+                                       // Utility
+                                       _scale: yScale,
+                                       _datasetIndex: this.index,
+                                       // Data
+                                       _children: points,
+                                       // Model
+                                       _model: {
+                                               // Appearance
+                                               tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+                                               backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
+                                               borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
+                                               borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
+                                               borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
+                                               borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
+                                               borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
+                                               borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
+                                               fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
+                                               // Scale
+                                               scaleTop: yScale.top,
+                                               scaleBottom: yScale.bottom,
+                                               scaleZero: scaleBase,
+                                       },
+                               });
+                               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) {

diff --git a/test/controller.line.tests.js b/test/controller.line.tests.js
index 1b918dff97d7850af2224817c0e5a5df6471a275..136c93c17571c721198094c139e5313f6a383960 100644 (file)
--- a/test/controller.line.tests.js
+++ b/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)',