Как сделать мою круговую диаграмму Google динамичной внутри Html-страницы?

#javascript #html #web

Вопрос:

Я пытаюсь создать динамическую круговую диаграмму для веб-страницы, т. е. Данные круговой диаграммы меняются каждые несколько секунд. В настоящее время я жестко закодировал данные в круговых диаграммах Google следующим образом.

 <script type="text/javascript">

    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Task', 'Percentage'],
            ['Reception', 24],
            ['Interance', 42],
            ['Washroom', 34],
        ]);

        var options = {
            title: 'Infection Risk Distribution'
        };


        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }

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


</script>
 

Проценты, представленные на графике, необходимо менять каждые несколько секунд случайным образом, чтобы общее количество по-прежнему составляло 100.

Может ли кто-нибудь подсказать мне возможные способы сделать это?