How can I produce a multi dataset line chart with correct Date X axis? #11732

DrKlipper · 2024-04-04T15:18:58Z

DrKlipper
Apr 4, 2024

Hi !
I need to plot some X/Y Data in a chart. I have multiple series of data and this is my sample:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Testseite</title>
    <!-- Füge Chart.js hinzu -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
    <!-- Hier wird der Chart gerendert -->
    <div style="width: 80%; margin: auto;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // Beispieldaten als Paare von Zeit und Wert
        const data = [
            { x: "2024-04-04T16:16:29.380969", y: 10 },
            { x: "2024-04-04T16:17:29.380969", y: 20 },
            { x: "2024-04-04T16:18:29.380969", y: 40 },
            { x: "2024-04-04T16:19:29.380969", y: 30 }
        ];
		
		const data2 = [
            { x: "2024-04-04T16:16:10.380969", y: 20 },
            { x: "2024-04-04T16:17:45.380969", y: 30 },
            { x: "2024-04-04T16:19:29.380969", y: 50 },
            { x: "2024-04-04T16:20:44.380969", y: 70 }
        ];

        // Konvertiere die Zeitstempel in Date-Objekte und Werte in Zahlen
        data.forEach(item => {
            item.time = new Date(item.time);
            item.value = parseFloat(item.value); // Konvertiere Wert zu einer Zahl
        });

        // Chart-Daten erstellen
        const chartData = {
            datasets: [{
                label: 'Wert 1',
                data: data,
                fill: false, 
                borderColor: 'rgb(75, 192, 192)'
            }, {
                label: 'Wert 2', 
                data: data2, 
                fill: false, 
                borderColor: 'rgb(175, 192, 192)' 
            }]
        };

        // Chart-Optionen konfigurieren
		const options = {
		}

        // Chart erstellen
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: options
        });
    </script>
</body>
</html>

When I run this demo I got this strange output:

Can anyone help me out and show me a correct plotting?
What I need is a automatic scaling of the X axis. It should use the Min / Max datetime values from the data.
Is this even possible?

Any help would be much appreciated !

Dominik

stockiNail · 2024-04-04T16:45:37Z

stockiNail
Apr 4, 2024

@DrKlipper the problem is related to the X scale. You are not setting the type and by default for a line chart is a category one (string based).
But AFAI have seen, you want to use the time, therefore it is enough you set the X scale with type :"time".

const options = {
  scales: {
    x: {
      type: "time"
    }
  }
};

See codepen: https://codepen.io/stockinail/pen/LYvQGOV

4 replies

DrKlipper Apr 4, 2024
Author

Ok and how can I format the X Axis?
The DateTime format is not really readable ... I would prefer something like hh:mm or mm:ss
Is that possible, too ?

stockiNail Apr 4, 2024

Yes, of course. See scale config to change format:

// Chart-Optionen konfigurieren
const options = {
  scales: {
    x: {
      type: "time",
      ticks: {
        callback(value) {
          return this.format(value, "hh:mm")
        }
      }
    }
  }
};

DrKlipper Apr 4, 2024
Author

U made my day!
Will try it later.
Thx so far

stockiNail Apr 4, 2024

UR welcome

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I produce a multi dataset line chart with correct Date X axis? #11732

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How can I produce a multi dataset line chart with correct Date X axis? #11732

DrKlipper Apr 4, 2024

Replies: 1 comment · 4 replies

stockiNail Apr 4, 2024

DrKlipper Apr 4, 2024 Author

stockiNail Apr 4, 2024

DrKlipper Apr 4, 2024 Author

stockiNail Apr 4, 2024

DrKlipper
Apr 4, 2024

Replies: 1 comment 4 replies

stockiNail
Apr 4, 2024

DrKlipper Apr 4, 2024
Author

DrKlipper Apr 4, 2024
Author