chartjs-plugin-trendline 3.0.1 → 3.0.3
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/.github/copilot-instructions.md +1 -1
- package/CLAUDE.md +45 -0
- package/GEMINI.md +40 -0
- package/README.md +4 -0
- package/dist/chartjs-plugin-trendline.min.js +1 -1
- package/example/barChart.html +135 -23
- package/example/barChartWithNullValues.html +139 -24
- package/example/barChart_label.html +137 -23
- package/example/lineChart.html +116 -16
- package/example/lineChartProjection.html +87 -17
- package/example/lineChartTypeTime.html +112 -23
- package/example/scatterChart.html +78 -11
- package/example/scatterProjection.html +88 -20
- package/example/test-null-handling.html +60 -0
- package/index.html +216 -0
- package/package.json +1 -1
- package/src/utils/drawing.js +15 -4
- package/src/utils/drawing.test.js +51 -0
|
@@ -1,16 +1,118 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
3
|
<head>
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
|
-
<title>
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.
|
|
10
|
-
<script src="
|
|
7
|
+
<title>Bar Chart with Label - Chart.js Trendline Plugin</title>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 40px 20px;
|
|
15
|
+
background-color: #f8f9fa;
|
|
16
|
+
color: #333;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
}
|
|
19
|
+
.container {
|
|
20
|
+
max-width: 1000px;
|
|
21
|
+
margin: 0 auto;
|
|
22
|
+
}
|
|
23
|
+
h1 {
|
|
24
|
+
text-align: center;
|
|
25
|
+
color: #2c3e50;
|
|
26
|
+
margin-bottom: 10px;
|
|
27
|
+
font-size: 2.5rem;
|
|
28
|
+
}
|
|
29
|
+
.subtitle {
|
|
30
|
+
text-align: center;
|
|
31
|
+
color: #7f8c8d;
|
|
32
|
+
margin-bottom: 40px;
|
|
33
|
+
font-size: 1.1rem;
|
|
34
|
+
}
|
|
35
|
+
.chart-container {
|
|
36
|
+
background: white;
|
|
37
|
+
padding: 30px;
|
|
38
|
+
border-radius: 8px;
|
|
39
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
40
|
+
margin-bottom: 30px;
|
|
41
|
+
}
|
|
42
|
+
.chart-wrapper {
|
|
43
|
+
position: relative;
|
|
44
|
+
height: 400px;
|
|
45
|
+
}
|
|
46
|
+
.info-section {
|
|
47
|
+
background: white;
|
|
48
|
+
padding: 25px;
|
|
49
|
+
border-radius: 8px;
|
|
50
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
51
|
+
margin-bottom: 20px;
|
|
52
|
+
}
|
|
53
|
+
.info-section h3 {
|
|
54
|
+
margin-top: 0;
|
|
55
|
+
color: #2c3e50;
|
|
56
|
+
border-bottom: 2px solid #3498db;
|
|
57
|
+
padding-bottom: 10px;
|
|
58
|
+
}
|
|
59
|
+
.nav-links {
|
|
60
|
+
text-align: center;
|
|
61
|
+
margin-top: 30px;
|
|
62
|
+
}
|
|
63
|
+
.nav-links a {
|
|
64
|
+
display: inline-block;
|
|
65
|
+
margin: 0 10px;
|
|
66
|
+
padding: 10px 20px;
|
|
67
|
+
background: #3498db;
|
|
68
|
+
color: white;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
border-radius: 4px;
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
transition: background-color 0.2s;
|
|
73
|
+
}
|
|
74
|
+
.nav-links a:hover {
|
|
75
|
+
background: #2980b9;
|
|
76
|
+
}
|
|
77
|
+
code {
|
|
78
|
+
background: #f8f9fa;
|
|
79
|
+
padding: 2px 6px;
|
|
80
|
+
border-radius: 3px;
|
|
81
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<div class="container">
|
|
87
|
+
<h1>Bar Chart with Trendline Label</h1>
|
|
88
|
+
<p class="subtitle">Demonstrates trendline with custom label displaying percentage</p>
|
|
89
|
+
|
|
90
|
+
<div class="chart-container">
|
|
91
|
+
<div class="chart-wrapper">
|
|
92
|
+
<canvas id="bar-chart"></canvas>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="info-section">
|
|
97
|
+
<h3>Configuration Used</h3>
|
|
98
|
+
<p>This example shows a bar chart with a <code>dotted</code> trendline that includes a custom label. The trendline is configured with:</p>
|
|
99
|
+
<ul>
|
|
100
|
+
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
101
|
+
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
102
|
+
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
103
|
+
<li><strong>label:</strong> Custom label with black text, percentage display, and 10px offset</li>
|
|
104
|
+
</ul>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="nav-links">
|
|
108
|
+
<a href="../index.html">← Back to Examples</a>
|
|
109
|
+
<a href="barChart.html">← Basic Bar Chart</a>
|
|
110
|
+
<a href="barChartWithNullValues.html">Bar Chart with Null Values →</a>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
11
114
|
<script>
|
|
12
|
-
document.addEventListener("DOMContentLoaded", function (
|
|
13
|
-
// Bar chart
|
|
115
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
14
116
|
new Chart(document.getElementById("bar-chart"), {
|
|
15
117
|
type: 'bar',
|
|
16
118
|
data: {
|
|
@@ -32,30 +134,42 @@
|
|
|
32
134
|
lineStyle: "dotted",
|
|
33
135
|
width: 2
|
|
34
136
|
}
|
|
35
|
-
}
|
|
137
|
+
}
|
|
36
138
|
]
|
|
37
139
|
},
|
|
38
140
|
options: {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
141
|
+
responsive: true,
|
|
142
|
+
maintainAspectRatio: false,
|
|
143
|
+
plugins: {
|
|
144
|
+
legend: {
|
|
145
|
+
display: false
|
|
146
|
+
},
|
|
147
|
+
title: {
|
|
148
|
+
display: true,
|
|
149
|
+
text: 'Population Data with Trendline Label',
|
|
150
|
+
font: {
|
|
151
|
+
size: 16
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
scales: {
|
|
156
|
+
y: {
|
|
157
|
+
beginAtZero: true,
|
|
158
|
+
title: {
|
|
159
|
+
display: true,
|
|
160
|
+
text: 'Population (millions)'
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
x: {
|
|
164
|
+
title: {
|
|
165
|
+
display: true,
|
|
166
|
+
text: 'Regions'
|
|
167
|
+
}
|
|
168
|
+
}
|
|
43
169
|
}
|
|
44
170
|
}
|
|
45
171
|
});
|
|
46
172
|
});
|
|
47
173
|
</script>
|
|
48
|
-
</head>
|
|
49
|
-
|
|
50
|
-
<body>
|
|
51
|
-
<h1>Bar Chart</h1>
|
|
52
|
-
|
|
53
|
-
<div style="width: 800px;">
|
|
54
|
-
<canvas id="bar-chart"></canvas>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/"
|
|
58
|
-
target="_blank">tobiasahlin.com.</a></p>
|
|
59
174
|
</body>
|
|
60
|
-
|
|
61
175
|
</html>
|
package/example/lineChart.html
CHANGED
|
@@ -1,13 +1,117 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
3
|
<head>
|
|
5
|
-
<meta charset="UTF-8"
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
7
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge"
|
|
8
|
-
<title>
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.
|
|
10
|
-
<script src="
|
|
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>Line Chart - Chart.js Trendline Plugin</title>
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 40px 20px;
|
|
15
|
+
background-color: #f8f9fa;
|
|
16
|
+
color: #333;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
}
|
|
19
|
+
.container {
|
|
20
|
+
max-width: 1000px;
|
|
21
|
+
margin: 0 auto;
|
|
22
|
+
}
|
|
23
|
+
h1 {
|
|
24
|
+
text-align: center;
|
|
25
|
+
color: #2c3e50;
|
|
26
|
+
margin-bottom: 10px;
|
|
27
|
+
font-size: 2.5rem;
|
|
28
|
+
}
|
|
29
|
+
.subtitle {
|
|
30
|
+
text-align: center;
|
|
31
|
+
color: #7f8c8d;
|
|
32
|
+
margin-bottom: 40px;
|
|
33
|
+
font-size: 1.1rem;
|
|
34
|
+
}
|
|
35
|
+
.chart-container {
|
|
36
|
+
background: white;
|
|
37
|
+
padding: 30px;
|
|
38
|
+
border-radius: 8px;
|
|
39
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
40
|
+
margin-bottom: 30px;
|
|
41
|
+
}
|
|
42
|
+
.chart-wrapper {
|
|
43
|
+
position: relative;
|
|
44
|
+
height: 400px;
|
|
45
|
+
}
|
|
46
|
+
.info-section {
|
|
47
|
+
background: white;
|
|
48
|
+
padding: 25px;
|
|
49
|
+
border-radius: 8px;
|
|
50
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
51
|
+
margin-bottom: 20px;
|
|
52
|
+
}
|
|
53
|
+
.info-section h3 {
|
|
54
|
+
margin-top: 0;
|
|
55
|
+
color: #2c3e50;
|
|
56
|
+
border-bottom: 2px solid #3498db;
|
|
57
|
+
padding-bottom: 10px;
|
|
58
|
+
}
|
|
59
|
+
.nav-links {
|
|
60
|
+
text-align: center;
|
|
61
|
+
margin-top: 30px;
|
|
62
|
+
}
|
|
63
|
+
.nav-links a {
|
|
64
|
+
display: inline-block;
|
|
65
|
+
margin: 0 10px;
|
|
66
|
+
padding: 10px 20px;
|
|
67
|
+
background: #3498db;
|
|
68
|
+
color: white;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
border-radius: 4px;
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
transition: background-color 0.2s;
|
|
73
|
+
}
|
|
74
|
+
.nav-links a:hover {
|
|
75
|
+
background: #2980b9;
|
|
76
|
+
}
|
|
77
|
+
code {
|
|
78
|
+
background: #f8f9fa;
|
|
79
|
+
padding: 2px 6px;
|
|
80
|
+
border-radius: 3px;
|
|
81
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<div class="container">
|
|
87
|
+
<h1>Line Chart with Labeled Trendlines</h1>
|
|
88
|
+
<p class="subtitle">Multiple datasets with different trendline styles and custom labels</p>
|
|
89
|
+
|
|
90
|
+
<div class="chart-container">
|
|
91
|
+
<div class="chart-wrapper">
|
|
92
|
+
<canvas id="line-chart"></canvas>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="info-section">
|
|
97
|
+
<h3>Configuration Features</h3>
|
|
98
|
+
<p>This example demonstrates advanced trendline features on line chart data:</p>
|
|
99
|
+
<ul>
|
|
100
|
+
<li><strong>Multiple datasets:</strong> Each with unique trendline configurations</li>
|
|
101
|
+
<li><strong>Custom labels:</strong> Asia dataset shows custom label positioning with offset</li>
|
|
102
|
+
<li><strong>Legend integration:</strong> Custom legend text for trendlines</li>
|
|
103
|
+
<li><strong>Line styles:</strong> Solid, dashed, and dotted trendlines</li>
|
|
104
|
+
<li><strong>Color gradients:</strong> Asia trendline uses colorMin/colorMax for gradient effect</li>
|
|
105
|
+
</ul>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="nav-links">
|
|
109
|
+
<a href="../index.html">← Back to Examples</a>
|
|
110
|
+
<a href="barChartWithNullValues.html">← Bar Chart with Null Values</a>
|
|
111
|
+
<a href="lineChartProjection.html">Line Chart Projection →</a>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
11
115
|
<script>
|
|
12
116
|
document.addEventListener('DOMContentLoaded', function (event) {
|
|
13
117
|
new Chart(document.getElementById('line-chart'), {
|
|
@@ -88,24 +192,20 @@
|
|
|
88
192
|
],
|
|
89
193
|
},
|
|
90
194
|
options: {
|
|
195
|
+
responsive: true,
|
|
196
|
+
maintainAspectRatio: false,
|
|
91
197
|
plugins: {
|
|
92
198
|
title: {
|
|
93
199
|
display: true,
|
|
94
200
|
text: 'World population per region (in millions)',
|
|
201
|
+
font: {
|
|
202
|
+
size: 16
|
|
203
|
+
}
|
|
95
204
|
},
|
|
96
205
|
},
|
|
97
206
|
},
|
|
98
207
|
});
|
|
99
208
|
});
|
|
100
209
|
</script>
|
|
101
|
-
</head>
|
|
102
|
-
|
|
103
|
-
<body>
|
|
104
|
-
<h1>Line Chart with Labeled Trendlines</h1>
|
|
105
|
-
|
|
106
|
-
<div style="width: 800px">
|
|
107
|
-
<canvas id="line-chart"></canvas>
|
|
108
|
-
</div>
|
|
109
210
|
</body>
|
|
110
|
-
|
|
111
211
|
</html>
|
|
@@ -6,20 +6,80 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
8
|
<title>Trendline Projection & Offset Example</title>
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.
|
|
10
|
-
<script src="
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
|
|
11
11
|
<style>
|
|
12
|
+
body {
|
|
13
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 40px 20px;
|
|
16
|
+
background-color: #f8f9fa;
|
|
17
|
+
color: #333;
|
|
18
|
+
line-height: 1.6;
|
|
19
|
+
}
|
|
20
|
+
.container {
|
|
21
|
+
max-width: 1000px;
|
|
22
|
+
margin: 0 auto;
|
|
23
|
+
}
|
|
24
|
+
h1 {
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: #2c3e50;
|
|
27
|
+
margin-bottom: 10px;
|
|
28
|
+
font-size: 2.5rem;
|
|
29
|
+
}
|
|
30
|
+
.subtitle {
|
|
31
|
+
text-align: center;
|
|
32
|
+
color: #7f8c8d;
|
|
33
|
+
margin-bottom: 40px;
|
|
34
|
+
font-size: 1.1rem;
|
|
35
|
+
}
|
|
12
36
|
.chart-container {
|
|
13
|
-
|
|
37
|
+
background: white;
|
|
38
|
+
padding: 30px;
|
|
39
|
+
border-radius: 8px;
|
|
40
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
41
|
+
margin-bottom: 30px;
|
|
42
|
+
}
|
|
43
|
+
.chart-wrapper {
|
|
44
|
+
position: relative;
|
|
14
45
|
height: 500px;
|
|
15
|
-
margin-bottom: 50px;
|
|
16
46
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
47
|
+
.info-section {
|
|
48
|
+
background: white;
|
|
49
|
+
padding: 25px;
|
|
50
|
+
border-radius: 8px;
|
|
51
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
52
|
+
margin-bottom: 20px;
|
|
53
|
+
}
|
|
54
|
+
.info-section h3 {
|
|
55
|
+
margin-top: 0;
|
|
56
|
+
color: #2c3e50;
|
|
57
|
+
border-bottom: 2px solid #3498db;
|
|
58
|
+
padding-bottom: 10px;
|
|
20
59
|
}
|
|
21
|
-
|
|
60
|
+
.nav-links {
|
|
22
61
|
text-align: center;
|
|
62
|
+
margin-top: 30px;
|
|
63
|
+
}
|
|
64
|
+
.nav-links a {
|
|
65
|
+
display: inline-block;
|
|
66
|
+
margin: 0 10px;
|
|
67
|
+
padding: 10px 20px;
|
|
68
|
+
background: #3498db;
|
|
69
|
+
color: white;
|
|
70
|
+
text-decoration: none;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
font-weight: 500;
|
|
73
|
+
transition: background-color 0.2s;
|
|
74
|
+
}
|
|
75
|
+
.nav-links a:hover {
|
|
76
|
+
background: #2980b9;
|
|
77
|
+
}
|
|
78
|
+
code {
|
|
79
|
+
background: #f8f9fa;
|
|
80
|
+
padding: 2px 6px;
|
|
81
|
+
border-radius: 3px;
|
|
82
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
23
83
|
}
|
|
24
84
|
</style>
|
|
25
85
|
<script>
|
|
@@ -73,7 +133,7 @@
|
|
|
73
133
|
// Dataset 3: Projected, with positive trendoffset and null data points.
|
|
74
134
|
// Observe: Trendline calculation starts after skipping the first 2 data points (due to trendoffset: 2).
|
|
75
135
|
// Null values (e.g., at x=65) are correctly ignored by the fitter. The line projects to chart edges.
|
|
76
|
-
data: [{ x: 50, y: 10 }, { x: 55, y: 12 }, { x: 60, y: 15 },
|
|
136
|
+
data: [{ x: 50, y: 10 }, { x: 55, y: 12 }, { x: 60, y: 15 }, { x: 70, y: 18 }, { x: 75, y: 22 }, {x: 65, y: null}],
|
|
77
137
|
label: "Dataset 3 (Projected, Offset+, Nulls)",
|
|
78
138
|
borderColor: "#4BC0C0",
|
|
79
139
|
backgroundColor: "rgba(75,192,192,0.1)",
|
|
@@ -157,15 +217,18 @@
|
|
|
157
217
|
</head>
|
|
158
218
|
|
|
159
219
|
<body>
|
|
160
|
-
<
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<
|
|
165
|
-
|
|
220
|
+
<div class="container">
|
|
221
|
+
<h1>Line Chart Projection</h1>
|
|
222
|
+
<p class="subtitle">Trendline projection, data offset, and null value handling</p>
|
|
223
|
+
|
|
224
|
+
<div class="chart-container">
|
|
225
|
+
<div class="chart-wrapper">
|
|
226
|
+
<canvas id="line-chart"></canvas>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
166
229
|
|
|
167
|
-
|
|
168
|
-
|
|
230
|
+
<div class="info-section">
|
|
231
|
+
<h3>Observations Guide</h3>
|
|
169
232
|
<ul>
|
|
170
233
|
<li><strong>Dataset 1 (Blue, Dotted Trend):</strong> Shows a standard projected trendline extending to the chart's X-axis boundaries.</li>
|
|
171
234
|
<li><strong>Dataset 2 (Red, Dashed Trend):</strong> Demonstrates a <strong>non-projected</strong> trendline. Notice how it only covers the span of its own data points (approx. x=15 to x=35).</li>
|
|
@@ -185,6 +248,13 @@
|
|
|
185
248
|
<li>All trendlines should be clipped correctly within the chart area boundaries, even if their mathematical extension would go beyond.</li>
|
|
186
249
|
<li>The slope displayed in the labels should consistently reflect the underlying data used for fitting, regardless of projection.</li>
|
|
187
250
|
</ul>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<div class="nav-links">
|
|
254
|
+
<a href="../index.html">← Back to Examples</a>
|
|
255
|
+
<a href="lineChart.html">← Line Chart</a>
|
|
256
|
+
<a href="lineChartTypeTime.html">Time Series Line Chart →</a>
|
|
257
|
+
</div>
|
|
188
258
|
</div>
|
|
189
259
|
|
|
190
260
|
</body>
|
|
@@ -3,24 +3,63 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Chart.js
|
|
6
|
+
<title>Time Scale Line Chart - Chart.js Trendline Plugin</title>
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
8
|
<!-- Include Chart.js and the Trendline plugin -->
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
|
|
9
10
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
|
10
|
-
<script src="
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
|
|
12
|
+
<style>
|
|
13
|
+
body {
|
|
14
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 40px 20px;
|
|
17
|
+
background-color: #f8f9fa;
|
|
18
|
+
color: #333;
|
|
19
|
+
line-height: 1.6;
|
|
20
|
+
}
|
|
21
|
+
.container {
|
|
22
|
+
max-width: 1000px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
h1 {
|
|
26
|
+
text-align: center;
|
|
27
|
+
color: #2c3e50;
|
|
28
|
+
margin-bottom: 10px;
|
|
29
|
+
font-size: 2.5rem;
|
|
30
|
+
}
|
|
31
|
+
.subtitle {
|
|
32
|
+
text-align: center;
|
|
33
|
+
color: #7f8c8d;
|
|
34
|
+
margin-bottom: 40px;
|
|
35
|
+
font-size: 1.1rem;
|
|
36
|
+
}
|
|
37
|
+
.chart-container {
|
|
38
|
+
background: white;
|
|
39
|
+
padding: 30px;
|
|
40
|
+
border-radius: 8px;
|
|
41
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
42
|
+
margin-bottom: 30px;
|
|
43
|
+
}
|
|
44
|
+
.chart-wrapper {
|
|
45
|
+
position: relative;
|
|
46
|
+
height: 400px;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
11
49
|
</head>
|
|
12
50
|
<body>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
51
|
+
<div class="container">
|
|
52
|
+
<h1>Chart.js Trendline Plugin</h1>
|
|
53
|
+
<p class="subtitle">Time Scale Line Chart with Trendline</p>
|
|
54
|
+
|
|
55
|
+
<div class="chart-container">
|
|
56
|
+
<div class="chart-wrapper">
|
|
57
|
+
<canvas id="chartjs"></canvas>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
16
61
|
|
|
17
62
|
<script type="text/javascript">
|
|
18
|
-
// Define colors
|
|
19
|
-
const barColor1 = '#258cda'; // Blue color for incidents
|
|
20
|
-
const borderColor1 = '#258cda'; // Same as backgroundColor for incidents
|
|
21
|
-
const barColor2 = '#cccccc'; // Gray color for outage
|
|
22
|
-
const borderColor2 = '#808080'; // Darker gray for borderColor of outage
|
|
23
|
-
|
|
24
63
|
// Get the context of the canvas element we want to select
|
|
25
64
|
const ctx = document.getElementById("chartjs").getContext('2d');
|
|
26
65
|
|
|
@@ -74,29 +113,79 @@
|
|
|
74
113
|
labels: chartDynamics.map((o) => o.datepost),
|
|
75
114
|
datasets: [
|
|
76
115
|
{
|
|
77
|
-
label: "
|
|
116
|
+
label: "Daily Quantity",
|
|
78
117
|
data: chartDynamics.map((o) => o.quantity),
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
118
|
+
borderColor: '#3e95cd',
|
|
119
|
+
backgroundColor: 'rgba(62,149,205,0.1)',
|
|
120
|
+
borderWidth: 2,
|
|
121
|
+
pointStyle: 'circle',
|
|
122
|
+
pointRadius: 4,
|
|
123
|
+
pointHoverRadius: 6,
|
|
124
|
+
fill: false,
|
|
125
|
+
trendlineLinear: {
|
|
126
|
+
colorMin: '#e74c3c',
|
|
127
|
+
lineStyle: "dotted",
|
|
128
|
+
width: 2,
|
|
129
|
+
label: {
|
|
130
|
+
display: true,
|
|
131
|
+
text: "Trend",
|
|
132
|
+
displayValue: true
|
|
133
|
+
}
|
|
134
|
+
},
|
|
82
135
|
},
|
|
83
136
|
],
|
|
84
137
|
},
|
|
85
138
|
options: {
|
|
86
139
|
maintainAspectRatio: false,
|
|
87
|
-
|
|
88
|
-
x: { type: "time", time: { tooltipFormat: "d", minUnit: "day" } },
|
|
89
|
-
},
|
|
90
|
-
interaction: { mode: "nearest", intersect: false },
|
|
140
|
+
responsive: true,
|
|
91
141
|
plugins: {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
142
|
+
title: {
|
|
143
|
+
display: true,
|
|
144
|
+
text: 'Time Series Data with Linear Trendline',
|
|
145
|
+
font: { size: 16 }
|
|
146
|
+
},
|
|
147
|
+
legend: {
|
|
148
|
+
display: true,
|
|
149
|
+
position: 'top'
|
|
150
|
+
},
|
|
151
|
+
tooltip: {
|
|
152
|
+
mode: 'index',
|
|
153
|
+
intersect: false
|
|
154
|
+
}
|
|
95
155
|
},
|
|
156
|
+
scales: {
|
|
157
|
+
x: {
|
|
158
|
+
type: "time",
|
|
159
|
+
time: {
|
|
160
|
+
tooltipFormat: "MMM d, yyyy",
|
|
161
|
+
displayFormats: {
|
|
162
|
+
day: 'MMM d'
|
|
163
|
+
},
|
|
164
|
+
minUnit: "day"
|
|
165
|
+
},
|
|
166
|
+
title: {
|
|
167
|
+
display: true,
|
|
168
|
+
text: 'Date'
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
y: {
|
|
172
|
+
title: {
|
|
173
|
+
display: true,
|
|
174
|
+
text: 'Quantity'
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
interaction: { mode: "nearest", intersect: false }
|
|
96
179
|
},
|
|
97
180
|
});
|
|
98
181
|
|
|
99
182
|
</script>
|
|
100
183
|
|
|
184
|
+
<div style="text-align: center; margin-top: 30px;">
|
|
185
|
+
<a href="../index.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Back to Examples</a>
|
|
186
|
+
<a href="lineChartProjection.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Line Chart Projection</a>
|
|
187
|
+
<a href="scatterChart.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">Scatter Chart →</a>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
101
190
|
</body>
|
|
102
191
|
</html>
|