使用 MySQL 数据更新 ChartJS

Question

I would like to update my ChartJS every x seconds with new data from my MySQL Database.我想每隔 x 秒用我的 MySQL 数据库中的新数据更新我的 ChartJS。 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.读取两个温度传感器的 Python 脚本正在填充数据库。 Is canvasjs the better solution for this? canvasjs 是更好的解决方案吗？

data.php:数据.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 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.现在数据每 5 秒更新一次，但是当我访问此页面时，我的浏览器负载过重。 Any tips for this issue?这个问题的任何提示？ Also there is an animation when the data is reloading.当数据重新加载时，还有一个 animation。 How to disable it?如何禁用它？

Answer 1

How about using setInterval that keeps invoking your showGraph ?使用setInterval不断调用你的showGraph怎么样？

setInterval(showGraph, 5000); // 5 seconds

Answer 2

You can easily create a Dynamic Chart from data from the MySQL database using CanvasJS.您可以使用 CanvasJS 从 MySQL 数据库中的数据轻松创建动态图表。 Here is a sample project you can refer to.这是您可以参考的示例项目。

使用 MySQL 数据更新 ChartJS

问题描述

2 个解决方案

解决方案1
0 2020-11-28 22:53:38

解决方案2
0 2020-12-03 11:10:42

使用 MySQL 数据更新 ChartJS

问题描述

2 个解决方案

解决方案1 0 2020-11-28 22:53:38

解决方案2 0 2020-12-03 11:10:42

解决方案1
0 2020-11-28 22:53:38

解决方案2
0 2020-12-03 11:10:42