Как обновить круговую диаграмму Google с помощью jQuery ajax

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

ВЫБЕРИТЕ ОПЦИЮ

<div>
    <select name="class" id="class" class="selectpicker">
        <option value="1">Class 1</option>
        <option value="2">Class 2</option>
    </select>
</div>

Круговая диаграмма HTML

<div id="donutchart" style="width: 900px; height: 350px;"></div>
<div id="chart"></div>
<div id="labelOverlay">
    <p class="used-size piecolor">50<span>%</span></p>
    <p class="total-size piecolor"> Progress</p>
</div>

SCRIPTS

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
$(document).ready(function () {
        $('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
            var selected = $(e.currentTarget).val();
            if (selected > 0) {
                $.ajax({
                    url: '/reports/?classId=' + selected + '&type=progress',
                    type: 'get',
                    dataType: 'html',
                    beforeSend: function () {

                    }
                }).done(function (learnerProgress) {

                }).fail(function (jqXHR, ajaxOptions, thrownError) {

                });
            }
        });
    });
</script>

<script type="text/javascript">
    google.charts.load("current", {
            packages: ["corechart"]
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Effort', 'Amount given'],
            ['Mastered', 80],
            ['Acquired', 40],
            ['Under Acquisition', 40],
            ['Needs More Practice', 20],
            ['Not started', 20],
        ]);

        var options = {
            //is3D:true,
            'tooltip': {
                trigger: 'none'
            },
            pieSliceText: "none",
            enableInteractivity: false,
            pieHole: 0.7,
            pieSliceTextStyle: {
                color: 'black',
            },
            slices: {
                0: {
                    color: '#009487'
                },
                1: {
                    color: '#88C157'
                },
                2: {
                    color: '#FFEA55'
                },
                3: {
                    color: '#FF972D'
                },
                4: {
                    color: '#FA463D'
                }
            }
            //legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
        google.load('visualization', '1', options);
    }
</script>