This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Chart.js - year independent x-axis
#1
I have data for several years, that should be plotted in a line graph. Data example:
date        season  cum_sum
2021-12-23  2022    11
2022-01-01  2022    19
2022-01-04  2022    20
2022-01-05  2022    40 
2022-03-01  2022    43
2022-12-01  2023    3
2022-12-02  2023    7
2022-12-10  2023    11
2022-12-23  2023    17
2023-01-01  2023    19
2023-01-05  2023    30

As you see in the attached image, the x-axis is not chronological. Days of the season 2023, that were not part of the season 2022, are plotted at the end of the x-axis. E.g.: data_2022 = ["01-03", 5], ["01-10", 15] data_2023 = ["01-03", 10], ["01-05",20] --> 01/05 is plotted on the end of the x-axis.


[Bild: 20230322042517ad21787bf2f822c510187e82dae7288f.png]


Here my current JS-Code:
 var ctx = document.getElementById('myChart').getContext('2d');
                var chart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        label: 'Season 2022',
                        data: data_2022,
                        borderColor: 'blue',
                        fill: false 
                        }, {
                        label: 'Season 2023',
                        data: data_2023,
                        borderColor: 'red',
                        fill: false
                    }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                unit: 'day',
                                unitStepSize: 1,
                                displayFormats: {
                                    'day': 'MMM DD'
                                },
                                tooltipFormat: 'MM-DD',
                            }
                        }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                    }
                }
                });
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste