highchart graph with mysql php

Question

i tried to build my first highchart graph but it doesn't work corretly . all data are on the same point but not on a line.Can you help me to understant where is the mistake ?

<pre>
<php include ('login.php)?>
<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

// Create connection
$connect = new mysqli($servername, $username, $password, $dbname);
// Check connection

if ($connect->connect_error) {
die("Connection failed: " . $connect->connect_error);
}

$sql = "SELECT * FROM ZiMeteo  order by Date desc limit 50";
$result = $connect->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$arr = array (
        'Date' => $row['Date'],
        'Temperature' => array_map('intval', explode(',',  $row['TmpExt']))
);
$series_array[] = $arr;
}
return json_encode($series_array);
} else {
echo "0 results";
}
$conn->close();

?>

Answer 1

Perhaps you're just using the wrong time format. (Your code doesn't tell it, it's just a guess)

According to the highcharts doc, it needs a timestamp as it used in Javascript. (which means: unix timestamp * 1000)

https://www.highcharts.com/docs/chart-concepts/axes#datetime

So you could do something like this to get a date like that:

$timestamp = strtotime($row['Date']);
$arr['Date'] = gmmktime(
            date('H', $timestamp),
            date('i', $timestamp),
            date('s', $timestamp),
            date('m', $timestamp),
            date('d', $timestamp),
            date('Y', $timestamp)) * 1000;

As said before: it's just a guess.

Addition after looking at your own answer:

After looking at your own answer: Yes, it's looking like the timestamp in first place.

But, I'm not sure, if your array structure itself works as expected. From API-Description it should look slightly different: https://api.highcharts.com/highcharts/series.line.data

series:[
    "name": "Temperature',
    "data":[
        {"x": 1658668200000, "y": 27 },
        {"x": 1658667600000, "y": 27 },
[...]
    ]
]

1658668200000 = gmmktime(13, 10, 0, 7, 24, 2022) * 1000;

1658667600000 = gmmktime(13, 0, 0, 7, 24, 2022) * 1000;

And of course: be sure the xAxis is of type datetime in your configuration object

xAxis: {
    title: {
        text: 'Date'
    },
    type: 'datetime',
},