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

Clash Royale CLAN TAG#URR8PPPhow to dynamically add rows to google pie chart using ajax and jquery
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){
}
})
}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.