Update ChartJS with MySQL Data

Question

I would like to update my ChartJS every x seconds with new data from my MySQL Database. The chart works very well but I don't understand how to make the chart update the data.

A Python script, that reads two temperature sensors, is filling the database. Is canvasjs the better solution for this?

data.php:

<?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","user","password","db");

$sqlQuery = "SELECT id,temp1,temp2 FROM table.results ORDER BY id";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data, JSON_NUMERIC_CHECK);
?>

index.php

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>

</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $first = true;

        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var id = [];
                     var temp1 = [];
                     var temp2 = [];

                    for (var i in data) {
                        id.push(data[i].id);
                        temp1.push(data[i].temp1);
                        temp2.push(data[i].temp2);
                    }

                    var chartdata = {
                        labels: id,
                        datasets: [
                            {
                                label: 'Temp1',
                                borderColor: '#46d5f1',
                                hoverBorderColor: '#666666',
                                data: temp1
                            }, {
                                label: 'Temp2',
                                borderColor: '#46d5f1',
                                hoverBorderColor: '#666666',
                                data: temp2
                            }
                        ]
                    };

                      var graphTarget = $("#graphCanvas");
                      var barGraph = new Chart(graphTarget, {
                          type: 'line',
                          data: chartdata
                    });



                });
            }
            setInterval(showGraph, 5000);
        }
        </script>

Now the data is updating every 5 seconds but my browser is under heavy load when I visit this page. Any tips for this issue? Also there is an animation when the data is reloading. How to disable it?

Answer 1

How about using setInterval that keeps invoking your showGraph ?

setInterval(showGraph, 5000); // 5 seconds

Answer 2

You can easily create a Dynamic Chart from data from the MySQL database using CanvasJS. Here is a sample project you can refer to.

Update ChartJS with MySQL Data

Question

2 answers

solution1
0 2020-11-28 22:53:38

solution2
0 2020-12-03 11:10:42

Update ChartJS with MySQL Data

Question

2 answers

solution1 0 2020-11-28 22:53:38

solution2 0 2020-12-03 11:10:42

solution1
0 2020-11-28 22:53:38

solution2
0 2020-12-03 11:10:42