Живое обновление HighCharts со значениями SQL

Question

Я пытаюсь заставить работать живое обновление графика. Сама диаграмма от HighCharts, а значения вставляются с использованием значений базы данных MySQL. Диаграмма работает нормально, но я не могу заставить работать живое обновление.

Я уже использовал скрипт прямого обновления Highcharts, но я думаю, что SQL-часть - это проблема, я надеюсь, что кто-то может отправить меня в правильном направлении.

Для ясности : пользователи могут заполнить форму, ответы затем вставляются в базу данных. И мне нужно, чтобы график обновлялся в реальном времени, чтобы мне не приходилось обновлять страницу.

PHP-часть

foreach ($grafiektitel as $competentie) {
$sql2 = "SELECT $competentie FROM titel";
$result = $link->query($sql2);
$waardes = [];

if ($result->num_rows > 0) {

    while ($row = $result->fetch_assoc()) {
        $waardes[] = $row[$competentie];
    }

} else {
    echo "0 results";
}
?>

<?php
$vals = array_count_values($waardes);


echo '<div id="' . $competentie . '" class="desc">';


echo '
<div class="grafiek" id="container-' . $competentie . '" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table id="datatable-' . $competentie . '">
    <thead>
        <tr>
            <th></th>
            <th>Slecht</th>
            <th>Matig</th>
            <th>Voldoende</th>
            <th>Goed</th>
            <th>Zeer Goed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>' . $competentie . '</th>
            <td>' . $vals[1] . '</td>
            <td>' . $vals[2] . '</td>
            <td>' . $vals[3] . '</td>
            <td>' . $vals[4] . '</td>
            <td>' . $vals[5] . '</td>
        </tr>

    </tbody>
</table>
      <hr>
    ';
echo '</div>';

Мой скрипт Highcharts:

$(document).ready(function(){
    $('.grafiek').each(function(index){

        Highcharts.chart($(this).attr('id'), {
            data: {
                table: 'datatable-'+$(this).attr('id').replace('container-','')
            },
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function () {

                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function () {
                                var x = (new Date()).getTime(), // current time
                                    y = Math.random();
                                series.addPoint([x, y], true, true);
                            }, 1000);
                        }
                    }
                },
            title: {
                text: 'Competentieanalyse'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: 'Units'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.point.y + ' ' + this.point.name.toLowerCase();

                }
            }
            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                }())
            }]
        });
    });
});