javascript - How to add Percentage and Total on the Legend of Google Pie Charts

Question

I have a page that displays data in a form of a Pie Chart. I use Google Charts to do this. Here's the code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Goal Name', 'No. of times Requested'],
        ['Frank.net Life Cover', 226],
        ['Frank.net Hospital Cash Back', 147],
        ['Frank.net Salary Protection', 228],
        ['King Price Car Insurance', 328],
        ['Momentum Medical Aid', 493],
        ['Oplan Health Cover', 185],
        ['Youi Quote', 33],
        ]);

        var options = {
          title: 'Most Requested Sponsors'
        };

       var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
        chart.draw(data, options);
      }
    </script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>

And here's a working JS FIDDLE:

http://jsfiddle.net/yRdW3/

Now, I need help on displaying the percentage and total next to each sponsor name on the legend. I have no idea how to achieve this. I want it to look similar to this:

Answer 1

Check this fiddle example. It is your code with attached legend (idea from first comment, total calculation and some minor errors corrected).

Basic idea is to set legend option of chart to none and than you have to build your own legend.

If you load that code into browser the legend will be positioned to the right but you have to set proper CSS rules to get everything right (I'm not so familiar with CSS). But you have the basic idea how to do that.

And for different sets of legend colors you can check color brewer