Closed insinfo closed 10 months ago
@Makanz the moving average is not working, I used your example and put my data, the moving average line is straight instead of following the data like in Excel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BarChart Example</title> <script src="assets/js/chartjs/4.3.0/chart.js"></script> <script src="assets/js/chartjs/4.3.0/chartjs-plugin-trendline.js"></script> <script> document.addEventListener("DOMContentLoaded", function (event) { // Bar chart new Chart(document.getElementById("bar-chart"), { type: 'bar', data: { labels: [ '12(2020)', '13(2020)', '14(2020)', '15(2020)', '16(2020)', '17(2020)', '18(2020)', '19(2020)', '20(2020)', '21(2020)', '22(2020)', '23(2020)', '24(2020)', '25(2020)', '26(2020)', '27(2020)', '28(2020)', '29(2020)', '30(2020)', '31(2020)', '32(2020)', '33(2020)', '34(2020)', '35(2020)', '36(2020)', '37(2020)', '38(2020)', '39(2020)', '40(2020)', '41(2020)', '42(2020)', '43(2020)', '44(2020)', '45(2020)', '46(2020)', '47(2020)', '48(2020)', '49(2020)', '50(2020)', '51(2020)', '52(2020)', '53(2020)', '1(2021)', '2(2021)', '3(2021)', '4(2021)', '5(2021)', '6(2021)', '7(2021)', '8(2021)', '9(2021)', '10(2021)', '11(2021)', '12(2021)', '13(2021)', '14(2021)', '15(2021)', '16(2021)', '17(2021)', '18(2021)', '19(2021)', '20(2021)', '21(2021)', '22(2021)', '23(2021)', '24(2021)', '25(2021)', '26(2021)', '27(2021)', '28(2021)', '29(2021)', '30(2021)', '31(2021)', '32(2021)', '33(2021)', '34(2021)', '35(2021)', '36(2021)', '37(2021)', '38(2021)', '39(2021)', '40(2021)', '41(2021)', '42(2021)', '43(2021)', '44(2021)', '45(2021)', '46(2021)', '47(2021)', '48(2021)', '49(2021)', '50(2021)', '51(2021)', '52(2021)', '1(2022)', '2(2022)', '3(2022)', '4(2022)', '5(2022)', '6(2022)', '7(2022)', '8(2022)', '9(2022)', '10(2022)', '11(2022)', '12(2022)', '13(2022)', '14(2022)', '15(2022)', '16(2022)', '17(2022)', '18(2022)', '19(2022)', '20(2022)', '21(2022)', '22(2022)', '23(2022)', '24(2022)', '25(2022)', '26(2022)', '27(2022)', '28(2022)', '29(2022)', '30(2022)', '31(2022)', '32(2022)', '33(2022)', '34(2022)', '35(2022)', '36(2022)', '37(2022)', '38(2022)', '39(2022)', '40(2022)', '41(2022)', '42(2022)', '43(2022)', '44(2022)', '45(2022)', '46(2022)', '47(2022)', '48(2022)', '49(2022)', '50(2022)', '51(2022)', '52(2022)', '01(2023', '02(2023)', '03(2023)', '04(2023)', '05(2023)', '06(2023)', '07(2023)', '08(2023)', '09(2023)', '10(2023)', '11(2023)', '12(2023)', '13(2023)', '14(2023)', '15(2023)', '16(2023)', '17(2023)', '18(2023)'], datasets: [ { label: "Info", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], data: [1, 7, 18, 31, 39, 33, 69, 107, 109, 103, 134, 124, 91, 105, 84, 110, 149, 111, 113, 76, 68, 66, 59, 70, 51, 51, 93, 76, 81, 86, 90, 114, 139, 140, 241, 287, 484, 440, 554, 610, 352, 364, 468, 347, 269, 220, 179, 162, 193, 272, 381, 345, 426, 325, 279, 249, 225, 231, 314, 358, 318, 335, 366, 339, 257, 272, 223, 198, 131, 131, 132, 178, 136, 231, 249, 167, 131, 174, 180, 123, 102, 75, 83, 51, 35, 28, 38, 30, 20, 15, 16, 12, 2, 5, 288, 1158, 2271, 1713, 860, 341, 124, 81, 28, 22, 28, 3, 7, 4, 7, 2, 17, 31, 32, 56, 123, 220, 399, 534, 803, 575, 376, 228, 85, 53, 41, 29, 19, 11, 7, 5, 0, 2, 1, 3, 3, 5, 10, 24, 63, 319, 511, 295, 196, 102, 83, 61, 41, 20, 22, 22, 14, 4, 18, 43, 54, 66, 67, 80, 56, 42, 41, 20, 24, 12], trendlineLinear: { colorMin: "rgba(255,105,180, .8)", lineStyle: "dotted", width: 2 } }, ] }, options: { legend: { display: false }, title: { display: true, text: 'Predicted world population (millions) in 2050' } } }); }); </script> </head> <body> <h1>Bar Chart</h1> <div style="width: 800px;"> <canvas id="bar-chart"></canvas> </div> <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p> </body> </html>
This plugin is only for linear trend lines not moving average.
Maybe this plugin is what you is searching for. https://github.com/rajasharan/moving-averages-chartjs
@Makanz the moving average is not working, I used your example and put my data, the moving average line is straight instead of following the data like in Excel
it should be like this