From efd06c886de405f00a93c506ef48a4e306c59af0 Mon Sep 17 00:00:00 2001 From: amlethojalen Date: Tue, 5 Jul 2016 19:50:53 +1000 Subject: [PATCH 1/5] Added ability for drawing a Line Chart as a stepped Line Chart. --- docs/03-Line-Chart.md | 2 +- src/elements/element.line.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md index d4b6ea902..447b05c5c 100644 --- a/docs/03-Line-Chart.md +++ b/docs/03-Line-Chart.md @@ -39,7 +39,7 @@ label | `String` | The label for the dataset which appears in the legend and too xAxisID | `String` | The ID of the x axis to plot this dataset on yAxisID | `String` | The ID of the y axis to plot this dataset on fill | `Boolean` | If true, fill the area under the line -lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. *Note* This was renamed from 'tension' but the old name still works. +lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. Set to -1 to draw a Stepped Line Chart. *Note* This was renamed from 'tension' but the old name still works. backgroundColor | `Color` | The fill color under the line. See [Colors](#getting-started-colors) borderWidth | `Number` | The width of the line in pixels borderColor | `Color` | The color of the line. diff --git a/src/elements/element.line.js b/src/elements/element.line.js index ba7fdf703..da939fc60 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -29,6 +29,9 @@ module.exports = function(Chart) { previousSkipHandler.call(me, previousPoint, point, nextPoint); } else if (point._view.tension === 0) { ctx.lineTo(point._view.x, point._view.y); + } else if (point._view.tension === -1) { + ctx.lineTo(point._view.x, previousPoint._view.y); + ctx.lineTo(point._view.x, point._view.y); } else { // Line between points ctx.bezierCurveTo( From bddc87020141cde114aa7092a413dab0fb8d3c1d Mon Sep 17 00:00:00 2001 From: amlethojalen Date: Wed, 6 Jul 2016 10:25:01 +1000 Subject: [PATCH 2/5] Added ability for drawing a Line Chart as a stepped Line Chart. (reverted from commit efd06c886de405f00a93c506ef48a4e306c59af0) --- docs/03-Line-Chart.md | 2 +- src/elements/element.line.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md index 447b05c5c..d4b6ea902 100644 --- a/docs/03-Line-Chart.md +++ b/docs/03-Line-Chart.md @@ -39,7 +39,7 @@ label | `String` | The label for the dataset which appears in the legend and too xAxisID | `String` | The ID of the x axis to plot this dataset on yAxisID | `String` | The ID of the y axis to plot this dataset on fill | `Boolean` | If true, fill the area under the line -lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. Set to -1 to draw a Stepped Line Chart. *Note* This was renamed from 'tension' but the old name still works. +lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. *Note* This was renamed from 'tension' but the old name still works. backgroundColor | `Color` | The fill color under the line. See [Colors](#getting-started-colors) borderWidth | `Number` | The width of the line in pixels borderColor | `Color` | The color of the line. diff --git a/src/elements/element.line.js b/src/elements/element.line.js index da939fc60..ba7fdf703 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -29,9 +29,6 @@ module.exports = function(Chart) { previousSkipHandler.call(me, previousPoint, point, nextPoint); } else if (point._view.tension === 0) { ctx.lineTo(point._view.x, point._view.y); - } else if (point._view.tension === -1) { - ctx.lineTo(point._view.x, previousPoint._view.y); - ctx.lineTo(point._view.x, point._view.y); } else { // Line between points ctx.bezierCurveTo( From 68728fc9a7fa88f02532f1f812fea81d2495f9e2 Mon Sep 17 00:00:00 2001 From: amlethojalen Date: Wed, 6 Jul 2016 11:13:12 +1000 Subject: [PATCH 3/5] Added ability to render a line chart as a stepped line chart. Added option.elements.line.stepped Added dataset.steppedLine Added Sample, and updated documentation. --- docs/01-Chart-Configuration.md | 1 + docs/03-Line-Chart.md | 1 + samples/line-stepped.html | 224 +++++++++++++++++++++++++++++ src/controllers/controller.line.js | 2 + src/elements/element.line.js | 3 + 5 files changed, 231 insertions(+) create mode 100644 samples/line-stepped.html diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index 75950eada..bf90e5b3c 100644 --- a/docs/01-Chart-Configuration.md +++ b/docs/01-Chart-Configuration.md @@ -355,6 +355,7 @@ borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozil borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) fill | Boolean | true | If true, the line is filled. +stepped | `Boolean` | If true, the line is shown as a steeped line and 'tension' will be ignored #### Point Configuration diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md index d4b6ea902..bc7a71a6c 100644 --- a/docs/03-Line-Chart.md +++ b/docs/03-Line-Chart.md @@ -59,6 +59,7 @@ pointHoverBorderWidth | `Number or Array` | Border width of point when h pointStyle | `String, Array, Image, Array` | 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 +steppedLine | `Boolean` | If true, the line is shown as a steeped line and 'lineTension' will be ignored An example data object using these attributes is shown below. ```javascript diff --git a/samples/line-stepped.html b/samples/line-stepped.html new file mode 100644 index 000000000..f9e456493 --- /dev/null +++ b/samples/line-stepped.html @@ -0,0 +1,224 @@ + + + + + Line Chart + + + + + + +
+ +
+
+
+ + + + + + + + + + diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index f3d7328d4..caee9c683 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -89,6 +89,7 @@ module.exports = function(Chart) { borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset), borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle), fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill), + steppedLine: custom.steppedLine ? custom.steppedLine : helpers.getValueOrDefault(dataset.steppedLine, lineElementOptions.stepped), // Scale scaleTop: scale.top, scaleBottom: scale.bottom, @@ -202,6 +203,7 @@ module.exports = function(Chart) { borderColor: me.getPointBorderColor(point, index), borderWidth: me.getPointBorderWidth(point, index), tension: meta.dataset._model ? meta.dataset._model.tension : 0, + steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false, // Tooltip hitRadius: custom.hitRadius || helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, pointOptions.hitRadius) }; diff --git a/src/elements/element.line.js b/src/elements/element.line.js index ba7fdf703..21a609544 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -27,6 +27,9 @@ module.exports = function(Chart) { skipHandler.call(me, previousPoint, point, nextPoint); } else if (previousPoint._view.skip && !spanGaps) { previousSkipHandler.call(me, previousPoint, point, nextPoint); + } else if (point._view.steppedLine === true) { + ctx.lineTo(point._view.x, previousPoint._view.y); + ctx.lineTo(point._view.x, point._view.y); } else if (point._view.tension === 0) { ctx.lineTo(point._view.x, point._view.y); } else { From 988423b05e99eb3e82bcf0f4e6b922d93a6e95d6 Mon Sep 17 00:00:00 2001 From: amlethojalen Date: Thu, 7 Jul 2016 08:35:21 +1000 Subject: [PATCH 4/5] Fixed up formatting suggestions/issues as per comments from zachpanz88 --- docs/01-Chart-Configuration.md | 2 +- samples/line-stepped.html | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index bf90e5b3c..a15cdbd36 100644 --- a/docs/01-Chart-Configuration.md +++ b/docs/01-Chart-Configuration.md @@ -355,7 +355,7 @@ borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozil borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) fill | Boolean | true | If true, the line is filled. -stepped | `Boolean` | If true, the line is shown as a steeped line and 'tension' will be ignored +stepped | Boolean | false | If true, the line is shown as a steeped line and 'tension' will be ignored #### Point Configuration diff --git a/samples/line-stepped.html b/samples/line-stepped.html index f9e456493..b482cf138 100644 --- a/samples/line-stepped.html +++ b/samples/line-stepped.html @@ -48,16 +48,16 @@ label: "My First dataset", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], fill: false, - steppedLine: true, + steppedLine: true, borderDash: [5, 5], }, { hidden: true, label: 'hidden dataset', - steppedLine: true, + steppedLine: true, data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], }, { label: "My Second dataset", - steppedLine: true, + steppedLine: true, data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], }] }, @@ -150,11 +150,11 @@ label: "My First dataset", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], fill: false, - steppedLine: true, + steppedLine: true, }, { label: "My Second dataset", fill: false, - steppedLine: true, + steppedLine: true, data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], }] }; @@ -179,7 +179,7 @@ pointBorderColor: randomColor(0.7), pointBackgroundColor: randomColor(0.5), pointBorderWidth: 1, - steppedLine: true, + steppedLine: true, data: [], }; From a1f94b1a57a02dbd45eac3e27d97a179b853557d Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 9 Jul 2016 10:01:15 -0400 Subject: [PATCH 5/5] update sample to have negative numbers --- samples/line-stepped.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/line-stepped.html b/samples/line-stepped.html index b482cf138..e618a698c 100644 --- a/samples/line-stepped.html +++ b/samples/line-stepped.html @@ -30,7 +30,7 @@ var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var randomScalingFactor = function() { - return Math.round(Math.random() * 100); + return (Math.random() > 0.5 ? -1 : 1) * Math.round(Math.random() * 100); //return 0; }; var randomColorFactor = function() {