How to implement Google Pie chart(with legend display and corresponding values)

Question

I have created google pie chart using json data from database. The pie chart was created with legend name, but i want also display legend with value,that is the name with value besides the piechart.I am trying out different stuffs but I am completely stumped by this.

The google pie chart code which I am implementing is(snippet):-

  function drawChart(data)
{
    var hi_cnt = data.length;
    var gdata = new google.visualization.DataTable();
    var total = 0;
    gdata.addColumn('string', 'Task');
    gdata.addColumn('number', 'Hours Per Day');
    gdata.addRows(hi_cnt);
     for  (var i= 0;i < hi_cnt; i++)
     {
        gdata.setCell(i, 0, data[i]['name']);
        gdata.setCell(i, 1, parseInt(data[i]['count']));

     }

     var options = {
        title: 'Number of Issues By Type',
        'width': 750,
        'height': 450,
        backgroundColor: '#EEE', 
        legend: {position: 'right'},
        areaOpacity: 1.0,
        sliceVisibilityThreshold:0,
        //vAxis: {format: '# $'},
        //hAxis: {title: '????', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}},
        //colors: ['CCFFCC', '66CC66', 'FF9999'],
        //animation: {duration: 1000, easing: 'out'}
     };

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

function getHealthReport() 
{ 
  var dataString = {auth_token: sessionStorage.auth_token,};
  var mh_url = MH_HOST + '/reports/get_health_issues_report.json';

  $.ajax(
  {
    type: "POST",
    url: mh_url,
    data: dataString,
    dataType: "json",
    success: function (data) 
    { 
        drawChart(data);    
    },
    error: function (data) 
    {
        alert("fail");
    }    
  });  
}

Can anyone please help me..

Rockking Rockking · Accepted Answer · 2013-03-15T03:55:53

My guess is you can try the following :-

var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {

    total += data.getValue(i, 1);

    // get the data
    var label = data.getValue(i, 0);
    var value = data.getValue(i, 1);
    var percent = Math.ceil(1000 * value / total) / 10;

    // This will create legend list for the display
    lis[i] = document.createElement('li');
    lis[i].id = 'legend_' + data.getValue(i, 0);
    lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';"></div>' + label + ': ' + value + ' (' + percent + '%)</span>';


    legend.appendChild(lis[i]);
}

Please let me know if it is right.

How to implement Google Pie chart(with legend display and corresponding values)

1 Answers