如何通过查询数据库来更新统计图?

时间:2019-07-15 13:07:56

标签: javascript php sql json chart.js

我正在尝试绘制一张图表,该图表描述最近7天获得通行证的人数。

我在phpMyAdmin's MySQL DBServer的后端使用PHP。 为了绘制图形,我使用了chart.js(由于碰巧碰到了这个问题,我愿意接受不同库的建议以寻求合适的解决方案)

用于创建要在chart.js JS代码中使用的结果数据集的PHP代码如下:

<?php
    $servername = "localhost";
    $username = "xyz";
    $password = "xyz";
    $dbname = "xyz";
    try 
    {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("SELECT inDate, COUNT(insertionId) AS occurrence FROM guestvisitorpassdetails GROUP BY inDate"); 
        $stmt->execute();
        $json_inDate = [];
        $json_occurrence = [];
        while($row = $stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
            $json_inDate = $inDate;
            $json_occurrence = (int)$occurrence;
        }
        echo json_encode($json_inDate);
        echo json_encode($json_occurrence);
    }
    catch(PDOException $e) {
        echo "Error: " . $e->getMessage();
    }
    $conn = null; 
?>

以下是用于绘制图形的元素

<canvas class="my-4 w-100 chartjs-render-monitor" id="myChart" width="1271" height="536" style="display: block; width: 1271px; height: 536px;"></canvas>

下面是用于绘制图形的必要chart.js脚本

<script>
    (function () {
        'use strict'
        feather.replace()
        var ctx = document.getElementById('myChart')
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: <?php echo json_encode($json_inDate); ?>,
                datasets: [{
                    data: <?php echo json_encode($json_occurrence); ?>,
                    lineTension: 0,
                    backgroundColor: 'transparent',
                    borderColor: '#007bff',
                    borderWidth: 4,
                    pointBackgroundColor: '#007bff'
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false
                        }
                    }]
                },
                legend: {
                    display: false
                }
            }
        })
    }())
</script>

尽管该图使用静态数据可以很好地进行绘制,但是如果我尝试通过查询数据库并更新图值来在每次页面加载时动态地对其进行更新,则该图将无法正常工作。 如果有人可以帮助我,我会感到很高兴。

谢谢。

1 个答案:

答案 0 :(得分:0)

回答我自己的问题,因为我最近找到了解决方案。

while循环中有一个小错误,下面将对此进行介绍

while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
    extract($row);
    $json_inDate = $inDate;
    $json_occurrence = (int)$occurrence;
}

正在读取的数据库中的值应存储在$json_inDate[]$json_occurrence[]中,而不是$json_inDate$json_occurrence中。在很长时间内完成的错误很小。这些修正案的代码运作正常。

致谢和感谢。