Dynamic pie chart using google chart api
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() { drawLeadChart("source", resp.source,'count'); });
google.charts.setOnLoadCallback(function() { drawLeadChart("priority", resp.priority,'count'); });
google.charts.setOnLoadCallback(function() { drawLeadChart("location", resp.location,'count'); });
google.charts.setOnLoadCallback(function() { drawLeadChart("budget", resp.budget,'count'); });`function drawLeadChart(charClass, apiLeadData, sourceType) {
// Create the data table for Sarah's pizza.
var data = new google.visualization.DataTable();
var obj = [];
$.each(apiLeadData, function (i, ele) {
let innerArr = new Array();
innerArr.push(ele.last_name);
if(sourceType == 'roi') {
innerArr.push(ele.sum/ele.count);
}else{
innerArr.push(ele[sourceType]);
}
obj.push(innerArr);
});
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows(obj);
var options = {
legend: {position: 'left', textStyle: {fontSize: 14}},
responsive: true,
chartArea: {
left: 15,
right: 10,
top: 0,
bottom: 20,
width: '100%',
height: '100%'
},
width: '100%'
};
// Instantiate and draw the chart for Sarah's pizza.
var chart = new google.visualization.PieChart(document.getElementById(charClass));
chart.draw(data, options);
}
output This is how it looks