Как обновить график, запросив базу данных?

Я пытаюсь построить график, показывающий количество людей, выданных с пропуском за последние 07 дней.

Я использую PHP в бэкенде с phpMyAdmin's MySQL DBServer. Для построения графика я использую chart.js (я открыт для предложений различных библиотек для подходящего решения, так как случайно наткнулся на это)

PHP-код для создания результирующего набора данных для использования в chart.js JS-коде выглядит следующим образом:

<?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>

Хотя график хорошо отображается со статическими данными, если я попытаюсь обновить его динамически при каждой загрузке страницы, запросив базу данных и обновив значения графика, это не сработает. Я был бы рад, если бы кто-то мог помочь мне с этим.

Спасибо.