JSFiddle - React, Tailwind, and code Playground

by yo3dgj

HTML

<?php
    header('Content-Type: application/json');
    
    $servername = "localhost";
    $username = "xxxx";
    $password = "xxxxxx0";
    $dbname = "xxxxxxx";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    
    if (mysqli_connect_errno($conn))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();
    
    $result = mysqli_query($conn, "SELECT  * FROM Energie_Log 
    ORDER BY Date DESC");
    
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['Time'] , "y" => $row['Ampere']);
        
        array_push($data_points, $point);        
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($conn);
    
?>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="jquery.canvasjs.js"></script>
       
        
            $.getJSON("data.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        
    </script>
</head>
<body>
<h1>YO3DGJ Power Data Logging</h1>

    <div id="chartContainer" style="width: 800px; height: 380px;"></div>

</body>
</html>