how to dynamically add rows to google pie chart using ajax and jquery

Question

how do I dynamically add rows to the google pie chart on each time the data is pulled by ajax call?

html

<div id="piechart" style="width: 900px; height: 500px;"></div>

google pie chart

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);

    var options = {
        'width': 900,
        'height': 500
        // pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

now instead of I want dynamic adding of rows as soon as page is loaded a should add new values fetched from ajax query like this:

ajax call

function getPieChartData() {
    $.ajax({
        url: pieChartData,
        headers: {
            token: token,
            params: JSON.stringify({
                "ads":[2,3],"start_date":"2018-01-01"
            })
        },
        type: "GET"
    }).then((response)=> {
        r = JSON.parse(response);
        let data = r.data
        if(data.length >0){
        }
    })
}

Answer 1

by default, google.charts.load will wait for the page to load,
we can use this in place of $(document).ready or similar functions.

once google charts has loaded, go ahead and create the data table, chart, options, etc.,
then get the data.

assuming the data is an array of arrays, similar to the example you provided,
you can simply use data table method addRows to add the data to the data table.
eg

data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', 7]
]);

or...

data.addRows(r.data);

if it is a single array or one row, use addRow

data.addRow(['Work', 11]);

the full snippet might look something like this...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Category');
  data.addColumn('number', 'Value');

  var options = {
    width: 900,
    height: 500
  };

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

  getPieChartData();

  function getPieChartData() {
    var pieChartData = 'some url';
    var token = 'some token';

    $.ajax({
      url: pieChartData,
      headers: {
        token: token,
        params: JSON.stringify({
          "ads":[2,3],"start_date":"2018-01-01"
        })
      },
      type: "GET"
    }).then((response)=> {
      r = JSON.parse(response);
      if (r.data.length > 0){
        data.addRows(r.data);
        chart.draw(data, options);
      }
    });
  }
});