Highcharts / JavaScript month is incompatible with MySQL

Question

I'm trying to dry the walls of my basement. For this, I have two Hydrometers (one is on the inside of the basements, one is one the outside). Related to these values, I am switching on a vent which brings fresh air from the outside, or I activate a dehumidifier. This system works fine for me. But for monitoring and controlling of the function of this System I am writing the values into a MySQL Database:

Datum = '2020-09-29 13:05:03'

Now I am using the charting library Highcharts for presentation:

LineChart in webbrowser with wrong Month

As you can see, the actual and last value, is from 29th October, which is exactly one month in the future.

My Internet research showed up with the fact, that in JavaScript the month Array starts with a 0, in PHP (which I use for extracting the values from the MySQL-Database) the Month Array seems to start with 1. So my problem is: how can I fix this?

I am good at electronics and ok in programming microcomputers, but for this presentation I scratched many many parts of code from different sites together, and get almost done. But only almost. If it's possible I'm fine with any dirty workaround like

datetime2.setMonth((datetime2.getMonth)-1

but the problem is my poorly programming skills, and I'm not able to study one complete JavaScript and a PHP book to solve this little annoying problem.

Here are the code- or chaos-snippets of interest in the DataLogger_Chart.html

<?php
$servername = "localhost";
$username = "XXXXXXXXX";
$password = "XXXXXXXXX";
$dbname = "Data_Logging";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }

$sql = "SELECT Luftfeuchte_absolut_innen, Luftfeuchte_absolut_aussen, Datum FROM Data_Logging.Temp_und_Luftfeuchte WHERE Datum >= date_sub(now(), interval 24 hour)";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $dataLuftFeuchteInnen[] = $row["Luftfeuchte_absolut_innen"];
        $dataLuftFeuchteAussen[] = $row["Luftfeuchte_absolut_aussen"];
        $dataDatum[] = $row["Datum"];
        }

    foreach ($dataDatum as &$value) {
        $datetime1[] = date('y, n, j, G, i, s', strtotime($value));
        }
    unset($value); // Entferne die Referenz auf das letzte Element
    foreach ($datetime1 as &$value) {
        $datetime2[] = 'Date.UTC('.$value.')';
        }
    unset($value); // Entferne die Referenz auf das letzte Element

    for ($i = 0; $i < count($dataLuftFeuchteInnen); $i++) {
        $datensatz_1[$i] = "[".strval($datetime2[$i]).", ".strval($dataLuftFeuchteInnen[$i])."]";
        $datensatz_2[$i] = "[".strval($datetime2[$i]).", ".strval($dataLuftFeuchteAussen[$i])."]";
        }

} 
else {
    echo "0 results";
}
$conn->close();
?>

I think this part is less interesting:

        <script type="text/javascript">  
Highcharts.chart('container', {

title: {
    text: 'Absolute Luftfeuchte Keller / Aussen'
    },
subtitle: {
    text: 'Wenn (Luftfeuchte aussen < Luftfeuchte innen) und (Innentemperatur > 17°C) schaltet sich der Lüfter ein. '
    },
yAxis: {
    title: {
        text: 'Luftfeuchte in gr / m³'
        }
},

Here I have the possibility to format the Output format in Highcharts

xAxis: {
    type: 'datetime',
        dateTimeLabelFormats: { 
                            hour: '%H:%M'  
                        }
},

And the last part:

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        }
    }
},

At this point, the php Data from above were inserted in the JavaScript Code

series: [{
    name: 'Luftfeuchte Innen',
    data: [<?php echo join($datensatz_1, ",") ?>]
}, {
    name: 'Luftfeuchte Aussen',
    data: [<?php echo join($datensatz_2, ",") ?>]
}],

When I'm looking at the source Code shown at the Browser, the above Code Snippet creates this:

series: [{
    name: 'Luftfeuchte Innen',
    data: [[Date.UTC(20, 9, 28, 14, 55, 03), 10.59],[Date.UTC(20, 9, 28, 15, 00, 02),...shortened...,[Date.UTC(20, 9, 29, 14, 50, 03), 11.05]]
    , {
    name: 'Luftfeuchte Aussen',
    data: [[Date.UTC(20, 9, 28, 14, 55, 03), 10.31],[Date.UTC(20, 9, 28, 15, 00, 02),...shortened...,[Date.UTC(20, 9, 29, 14, 50, 03), 10.97]]
    }],

And the last part of the Code:

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});
    </script>

Answer 1

Thanks a Lot @Waqar, the hint with the miliseconds brought me to this site link So I changed:

foreach ($dataDatum as &$value) {
$datetime1[] = date('y, n, j, G, i, s', strtotime($value));
}
unset($value); // Entferne die Referenz auf das letzte Element
foreach ($datetime1 as &$value) {
$datetime2[] = 'Date.UTC('.$value.')';
}
unset($value); // Entferne die Referenz auf das letzte Element

to

foreach ($dataDatum as &$value) {
$datetime1[] = strtotime($value);
}
unset($value); // Entferne die Referenz auf das letzte Element
foreach ($datetime1 as &$value) {
$datetime2[] = $value * 1000;
}
unset($value); // Entferne die Referenz auf das letzte Element

And this works totaly fine for me!

Answer 2

HighCharts accepts datetime in to milliseconds

so first convert datetime string to milliseconds & then pass to HighCharts object.