chartjs-plugin-trendline 2.0.2 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/dist/chartjs-plugin-trendline.min.js +2 -2
- package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt +10 -10
- package/example/barChart.html +5 -2
- package/example/barChartWithNullValues.html +50 -0
- package/example/lineChart.html +5 -3
- package/example/lineChartProjection.html +16 -13
- package/package.json +3 -3
- package/src/chartjs-plugin-trendline.js +13 -3
package/README.md
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
# chartjs-plugin-trendline
|
|
2
2
|
|
|
3
|
-
This plugin draws an linear trendline in your Chart.
|
|
3
|
+
This plugin draws an linear trendline in your Chart.
|
|
4
|
+
It has been tested with Chart.js version 4.3.0.
|
|
4
5
|
|
|
5
6
|
## Installation
|
|
6
7
|
|
|
7
8
|
#### Load directly in the browser
|
|
8
9
|
|
|
9
|
-
Load
|
|
10
|
+
Load Chart.js first, then the plugin which will automatically register itself with Chart.js
|
|
10
11
|
|
|
11
12
|
```html
|
|
12
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.min.js"></script>
|
|
13
14
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
|
|
14
15
|
```
|
|
15
16
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
|
|
2
|
-
(()=>{var t={460:(t,i)=>{var e={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?e=t.scales[a]:i=t.scales[a],e&&i)break;var r=t.ctx;t.data.datasets.forEach((function(i,a){var n=i.alwaysShowTrendline||t.isDatasetVisible(a);if(i.trendlineLinear&&n&&i.data.length>1){var o=t.getDatasetMeta(a);!function(t,i,e,a,r){var n=e.borderColor||"rgba(169,169,169, .6)",o=e.trendlineLinear.colorMin||n,h=e.trendlineLinear.colorMax||n,l=e.trendlineLinear.width||e.borderWidth,u=e.trendlineLinear.lineStyle||"solid",d=e.trendlineLinear.fillColor;l=void 0!==l?l:3;var m=new s,
|
|
1
|
+
/*! For license information please see chartjs-plugin-trendline.min.js.LICENSE.txt */
|
|
2
|
+
(()=>{var t={460:(t,i)=>{var e={id:"chartjs-plugin-trendline",afterDatasetsDraw:function(t){var i,e;for(var a in t.scales)if("x"==a[0]?e=t.scales[a]:i=t.scales[a],e&&i)break;var r=t.ctx;t.data.datasets.forEach((function(i,a){var n=i.alwaysShowTrendline||t.isDatasetVisible(a);if(i.trendlineLinear&&n&&i.data.length>1){var o=t.getDatasetMeta(a);!function(t,i,e,a,r){var n=e.borderColor||"rgba(169,169,169, .6)",o=e.trendlineLinear.colorMin||n,h=e.trendlineLinear.colorMax||n,l=e.trendlineLinear.width||e.borderWidth,u=e.trendlineLinear.lineStyle||"solid",d=e.trendlineLinear.fillColor;l=void 0!==l?l:3;var m=new s,x=e.data.findIndex((t=>null!=t)),c=e.data.length-1,f=t.data[x].x,X=t.data[c].x,v="object"==typeof e.data[x];e.data.forEach((function(t,i){if(null!=t)if(["time","timeseries"].includes(a.options.type)){var e=null!=t.x?t.x:t.t;void 0!==e?m.add(new Date(e).getTime(),t.y):m.add(i,t)}else v?isNaN(t.x)||isNaN(t.y)?isNaN(t.x)?isNaN(t.y)||m.add(i,t.y):m.add(i,t.x):m.add(t.x,t.y):m.add(i,t)}));var p,y,g=a.getPixelForValue(m.minx),w=r.getPixelForValue(m.f(m.minx));if(e.trendlineLinear.projection&&m.scale()<0){var Y=m.fo();Y<m.minx&&(Y=m.maxx),p=a.getPixelForValue(Y),y=r.getPixelForValue(m.f(Y))}else p=a.getPixelForValue(m.maxx),y=r.getPixelForValue(m.f(m.maxx));v||(g=f,p=X);var P=t.controller.chart.chartArea.bottom,C=t.controller.chart.width;if(w>P){var L=w-P,b=w-y;w=P,g+=C*(L/b)}else y>P&&(L=y-P,b=y-w,y=P,p=C-(p-(C-C*(L/b))));i.lineWidth=l,"dotted"===u&&i.setLineDash([2,3]),i.beginPath(),i.moveTo(g,w),i.lineTo(p,y);var F=i.createLinearGradient(g,w,p,y);y<w?(F.addColorStop(0,h),F.addColorStop(1,o)):(F.addColorStop(0,o),F.addColorStop(1,h)),i.strokeStyle=F,i.stroke(),i.closePath(),!d||(i.fillStyle=d,i.beginPath(),i.moveTo(g,w),i.lineTo(p,y),i.lineTo(p,P),i.lineTo(g,P),i.closePath(),i.fill())}(o,r,i,e,t.scales[o.yAxisID])}})),r.setLineDash([])}};function s(){this.count=0,this.sumX=0,this.sumX2=0,this.sumXY=0,this.sumY=0,this.minx=1e100,this.maxx=-1e100,this.maxy=-1e100}s.prototype={add:function(t,i){t=parseFloat(t),i=parseFloat(i),this.count++,this.sumX+=t,this.sumX2+=t*t,this.sumXY+=t*i,this.sumY+=i,t<this.minx&&(this.minx=t),t>this.maxx&&(this.maxx=t),i>this.maxy&&(this.maxy=i)},f:function(t){t=parseFloat(t);var i=this.count*this.sumX2-this.sumX*this.sumX;return(this.sumX2*this.sumY-this.sumX*this.sumXY)/i+t*((this.count*this.sumXY-this.sumX*this.sumY)/i)},fo:function(){var t=this.count*this.sumX2-this.sumX*this.sumX;return-(this.sumX2*this.sumY-this.sumX*this.sumXY)/t/((this.count*this.sumXY-this.sumX*this.sumY)/t)},scale:function(){var t=this.count*this.sumX2-this.sumX*this.sumX;return(this.count*this.sumXY-this.sumX*this.sumY)/t}},"undefined"!=typeof window&&window.Chart&&(window.Chart.hasOwnProperty("register")?window.Chart.register(e):window.Chart.plugins.register(e));try{t.exports=e}catch(t){}}},i={};!function e(s){var a=i[s];if(void 0!==a)return a.exports;var r=i[s]={exports:{}};return t[s](r,r.exports,e),r.exports}(460)})();
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* chartjs-plugin-trendline.js
|
|
3
|
-
* Version: 2.0.
|
|
4
|
-
*
|
|
5
|
-
* Copyright 2023 Marcus Alsterfjord
|
|
6
|
-
* Released under the MIT license
|
|
7
|
-
* https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
|
|
8
|
-
*
|
|
9
|
-
* Mod by: vesal: accept also xy-data so works with scatter
|
|
10
|
-
*/
|
|
1
|
+
/*!
|
|
2
|
+
* chartjs-plugin-trendline.js
|
|
3
|
+
* Version: 2.0.4
|
|
4
|
+
*
|
|
5
|
+
* Copyright 2023 Marcus Alsterfjord
|
|
6
|
+
* Released under the MIT license
|
|
7
|
+
* https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
|
|
8
|
+
*
|
|
9
|
+
* Mod by: vesal: accept also xy-data so works with scatter
|
|
10
|
+
*/
|
package/example/barChart.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
7
|
<title>BarChart Example</title>
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js"></script>
|
|
9
9
|
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
10
|
<script>
|
|
11
11
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
@@ -40,7 +40,10 @@
|
|
|
40
40
|
</head>
|
|
41
41
|
<body>
|
|
42
42
|
<h1>Bar Chart</h1>
|
|
43
|
-
|
|
43
|
+
|
|
44
|
+
<div style="width: 800px;">
|
|
45
|
+
<canvas id="bar-chart"></canvas>
|
|
46
|
+
</div>
|
|
44
47
|
|
|
45
48
|
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
|
|
46
49
|
</body>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
+
<title>BarChart Example</title>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js"></script>
|
|
9
|
+
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
|
+
<script>
|
|
11
|
+
document.addEventListener("DOMContentLoaded", function(event) {
|
|
12
|
+
// Bar chart
|
|
13
|
+
new Chart(document.getElementById("bar-chart"), {
|
|
14
|
+
type: 'bar',
|
|
15
|
+
data: {
|
|
16
|
+
labels: ["Africa", "Asia", "Europe", "Latin America", "Undefined", "null", "North America"],
|
|
17
|
+
datasets: [
|
|
18
|
+
{
|
|
19
|
+
label: "Population (millions)",
|
|
20
|
+
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
|
|
21
|
+
data: [2478,5267,734,784,undefined, null,433],
|
|
22
|
+
trendlineLinear: {
|
|
23
|
+
colorMin: "rgba(255,105,180, .8)",
|
|
24
|
+
lineStyle: "dotted",
|
|
25
|
+
width: 2
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
options: {
|
|
31
|
+
legend: { display: false },
|
|
32
|
+
title: {
|
|
33
|
+
display: true,
|
|
34
|
+
text: 'Predicted world population (millions) in 2050'
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
<h1>Bar Chart</h1>
|
|
43
|
+
|
|
44
|
+
<div style="width: 800px;">
|
|
45
|
+
<canvas id="bar-chart"></canvas>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
package/example/lineChart.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
7
|
<title>LineChart Example</title>
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js"></script>
|
|
9
9
|
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
10
|
<script>
|
|
11
11
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
@@ -64,8 +64,10 @@
|
|
|
64
64
|
</head>
|
|
65
65
|
<body>
|
|
66
66
|
<h1>Line Chart</h1>
|
|
67
|
-
<canvas id="line-chart" width="800" height="450"></canvas>
|
|
68
67
|
|
|
69
|
-
<
|
|
68
|
+
<div style="width: 800px;">
|
|
69
|
+
<canvas id="line-chart"></canvas>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
70
72
|
</body>
|
|
71
73
|
</html>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
7
|
<title>XYlineChart Projection Example</title>
|
|
8
|
-
<script src="https://
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.js"></script>
|
|
9
9
|
<script src="./../src/chartjs-plugin-trendline.js"></script>
|
|
10
10
|
<script>
|
|
11
11
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
type: 'line',
|
|
14
14
|
data: {
|
|
15
15
|
datasets: [{
|
|
16
|
-
data: [{x: 0, y: 30}, {x: 5, y:25}, {x: 10, y: 23}],
|
|
16
|
+
data: [{x: 0, y: 30}, {x: 5, y:25}, {x: 10, y: 23}, {x: 25, y: 23}, {x: 35, y: 17}, {x: 45, y: 17}],
|
|
17
17
|
label: "Count",
|
|
18
18
|
borderColor: "#3e95cd",
|
|
19
19
|
fill: false,
|
|
@@ -23,23 +23,24 @@
|
|
|
23
23
|
width: 1,
|
|
24
24
|
projection: true
|
|
25
25
|
}
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
data: [{x: 60, y: 0}],
|
|
29
|
+
borderColor: "black",
|
|
30
|
+
label: "Goal",
|
|
31
|
+
fill: false
|
|
31
32
|
}]
|
|
32
33
|
},
|
|
33
34
|
options: {
|
|
34
35
|
title: {
|
|
35
36
|
display: true,
|
|
36
37
|
text: 'Cigarettes per days',
|
|
37
|
-
},
|
|
38
|
-
maintainAspectRatio:
|
|
38
|
+
},
|
|
39
|
+
maintainAspectRatio: true,
|
|
39
40
|
responsive: true,
|
|
40
41
|
scales: {
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
x: { type: 'linear', position: 'bottom', scaleLabel: { labelString: 'days', display: true}},
|
|
43
|
+
y: { type: 'linear', position: 'left', scaleLabel: { labelString: 'cigarretts/day', display: true}, display: true },
|
|
43
44
|
}
|
|
44
45
|
}
|
|
45
46
|
});
|
|
@@ -48,8 +49,10 @@
|
|
|
48
49
|
</head>
|
|
49
50
|
<body>
|
|
50
51
|
<h1>X/Y Chart with trendline projection on x axis</h1>
|
|
51
|
-
<canvas id="line-chart" width="600" height="450"></canvas>
|
|
52
52
|
|
|
53
|
-
<
|
|
53
|
+
<div style="width: 800px; height: 450px;">
|
|
54
|
+
<canvas id="line-chart"></canvas>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
54
57
|
</body>
|
|
55
58
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chartjs-plugin-trendline",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"description": "Trendline for Chart.js",
|
|
5
5
|
"main": "src/chartjs-plugin-trendline.js",
|
|
6
6
|
"scripts": {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"webpack": "^5.
|
|
21
|
-
"webpack-cli": "^5.
|
|
20
|
+
"webpack": "^5.88.2",
|
|
21
|
+
"webpack-cli": "^5.1.4"
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* chartjs-plugin-trendline.js
|
|
3
|
-
* Version: 2.0.
|
|
3
|
+
* Version: 2.0.4
|
|
4
4
|
*
|
|
5
5
|
* Copyright 2023 Marcus Alsterfjord
|
|
6
6
|
* Released under the MIT license
|
|
@@ -69,9 +69,19 @@ function addFitter(datasetMeta, ctx, dataset, xScale, yScale) {
|
|
|
69
69
|
|
|
70
70
|
if (['time', 'timeseries'].includes(xScale.options.type)) {
|
|
71
71
|
var x = data.x != null ? data.x : data.t;
|
|
72
|
-
|
|
72
|
+
if (x !== undefined) {
|
|
73
|
+
fitter.add(new Date(x).getTime(), data.y);
|
|
74
|
+
} else {
|
|
75
|
+
fitter.add(index, data);
|
|
76
|
+
}
|
|
73
77
|
} else if (xy) {
|
|
74
|
-
|
|
78
|
+
if (!isNaN(data.x) && !isNaN(data.y)) {
|
|
79
|
+
fitter.add(data.x, data.y);
|
|
80
|
+
} else if (!isNaN(data.x)) {
|
|
81
|
+
fitter.add(index, data.x);
|
|
82
|
+
} else if (!isNaN(data.y)) {
|
|
83
|
+
fitter.add(index, data.y);
|
|
84
|
+
}
|
|
75
85
|
} else {
|
|
76
86
|
fitter.add(index, data);
|
|
77
87
|
}
|