2 of 3
generating google pie chart using google api with dynamic data
Ankit Singh
  • 325
  • 3
  • 12

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

Ankit Singh
  • 325
  • 3
  • 12