如何使用 jQuery ajax 更新谷歌饼图

Question

I am using Google Pie Chart for data visualization and displaying data on page load and now I have to updated pie chart when user select any class and data will update with ajax but I don't know how to update pie chart with ajax so try to provide your guidance how to pie update chart.

SELECT OPTION

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

PIE CHART 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>

Answer 1

first, google's load statement will wait for the page to load by default.

so use --> google.charts.load

instead of --> $(document).ready

once google has loaded, create the chart, options, and setup select change event.

assuming the ajax data is in the following format,

[
  ['Effort', 'Amount given'],
  ['Mastered', 80],
  ['Acquired', 40],
  ['Under Acquisition', 40],
  ['Needs More Practice', 20],
  ['Not started', 20],
]

see following snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

  var options = {
    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'
      }
    }
  };

  $('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
    if (selected > 0) {
      drawChart(selected);
    }
  });

  function drawChart(selected) {
    $.ajax({
      url: '/reports/?classId=' + selected + '&type=progress',
      type: 'get',
      dataType: 'html',
      beforeSend: function () {

      }
    }).done(function (learnerProgress) {

      var data = google.visualization.arrayToDataTable(learnerProgress);
      chart.draw(data, options);

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

    });
  }

  // on page load
  drawChart($('#class').val());
});

note: the following isn't needed, this is the load statement from the old version.

google.load('visualization', '1', options);