highchart graph with mysql php-CodePudding

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();

CodePudding user response：

@akrys here's the result of my request without chart [{"Date":"2022-07-24 13:10:00","Temperature":[27]},{"Date":"2022-07-24 13:00:00","Temperature":[27]},{"Date":"2022-07-24 12:50:00","Temperature":[27]},{"Date":"2022-07-24 12:40:00","Temperature":[27]},{"Date":"2022-07-24 12:30:00","Temperature":[27]},{"Date":"2022-07-24 12:20:00","Temperature":[26]},{"Date":"2022-07-24 12:10:00","Temperature":[26]},{"Date":"2022-07-24 12:00:00","Temperature":[26]},{"Date":"2022-07-24 11:50:00","Temperature":[25]},{"Date":"2022-07-24 11:40:00","Temperature":[25]},{"Date":"2022-07-24 11:30:00","Temperature":[25]},{"Date":"2022-07-24 11:20:00","Temperature":[25]},{"Date":"2022-07-24 11:10:00","Temperature":[25]},{"Date":"2022-07-24 11:00:00","Temperature":[24]},{"Date":"2022-07-24 10:50:00","Temperature":[24]},{"Date":"2022-07-24 10:40:00","Temperature":[24]},{"Date":"2022-07-24 10:30:00","Temperature":[23]},{"Date":"2022-07-24 10:20:00","Temperature":[23]},{"Date":"2022-07-24 10:10:00","Temperature":[23]},{"Date":"2022-07-24 10:00:00","Temperature":[22]},{"Date":"2022-07-24 09:50:00","Temperature":[21]},{"Date":"2022-07-24 09:40:00","Temperature":[21]},{"Date":"2022-07-24 09:30:00","Temperature":[20]},{"Date":"2022-07-24 09:20:00","Temperature":[20]},{"Date":"2022-07-24 09:10:00","Temperature":[19]},{"Date":"2022-07-24 09:00:00","Temperature":[19]},{"Date":"2022-07-24 08:50:00","Temperature":[19]},{"Date":"2022-07-24 08:40:00","Temperature":[19]},{"Date":"2022-07-24 08:30:00","Temperature":[18]},{"Date":"2022-07-24 08:20:00","Temperature":[17]},{"Date":"2022-07-24 08:10:00","Temperature":[16]},{"Date":"2022-07-24 08:00:00","Temperature":[15]},{"Date":"2022-07-24 07:50:00","Temperature":[14]},{"Date":"2022-07-24 07:40:00","Temperature":[14]},{"Date":"2022-07-24 07:30:00","Temperature":[13]},

Blockquote

CodePudding user response：

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',
},

CodePudding user response：

@akrys

actually i don't understant anything maybe i worked too much on this. must i replace x and y values with row data path ?