title: How to update google pie chart using jQuery ajax
body: <p>I am using <a href="https://developers.google.com/chart/interactive/docs/gallery/piechart" rel="nofollow noreferrer">Google Pie Chart</a> 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.</p>
  
  <h2>SELECT OPTION</h2>
  
  <pre><code>&lt;div&gt;
      &lt;select name="class" id="class" class="selectpicker"&gt;
          &lt;option value="1"&gt;Class 1&lt;/option&gt;
          &lt;option value="2"&gt;Class 2&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>PIE CHART HTML</h2>
  
  <pre><code>&lt;div id="donutchart" style="width: 900px; height: 350px;"&gt;&lt;/div&gt;
  &lt;div id="chart"&gt;&lt;/div&gt;
  &lt;div id="labelOverlay"&gt;
      &lt;p class="used-size piecolor"&gt;50&lt;span&gt;%&lt;/span&gt;&lt;/p&gt;
      &lt;p class="total-size piecolor"&gt; Progress&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>SCRIPTS</h2>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
          $('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
              var selected = $(e.currentTarget).val();
              if (selected &gt; 0) {
                  $.ajax({
                      url: '/reports/?classId=' + selected + '&amp;type=progress',
                      type: 'get',
                      dataType: 'html',
                      beforeSend: function () {
  
                      }
                  }).done(function (learnerProgress) {
  
                  }).fail(function (jqXHR, ajaxOptions, thrownError) {
  
                  });
              }
          });
      });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      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);
      }
  &lt;/script&gt;
  </code></pre>