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: ```

``` And here's a working JS FIDDLE: http://jsfiddle.net/yRdW3/ Now, I need help…

Accepted Answer

You can do this creating a column for tooltip and use your first column as legend. Check this FIDDLE

```
var dataArray = [
    ['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 total = getTotal(dataArray);

// Adding tooltip column  
for (var i = 0; i < dataArray.length; i++) {
  dataArray[i].push(customTooltip(dataArray[i][0], dataArray[i][1], total));
}

// Changing legend  
for (var i = 0; i < dataArray.length; i++) {
  dataArray[i][0] = dataArray[i][0] + " " + 
      dataArray[i][1] + " requests, " + ((dataArray[i][1] / total) * 100).toFixed(1) + "%"; 
}

// Column names
dataArray.unshift(['Goal Name', 'No. of times Requested', 'Tooltip']);

var data = google.visualization.arrayToDataTable(dataArray);
```

Using `arrayToDataTable`, you need to set the role tooltip in "Tooltip" column:

```
data.setColumnProperty(2, 'role', 'tooltip');
data.setColumnProperty(2, 'html', true);
```

Note: If you are creating the `dataTable` dynamically just call `addColumn` with this signature:

```
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
```

And in options add `tooltip: { isHtml: true }`:

```
var options = {
    title: 'Most Requested Sponsors',
    width: 900,
    height: 400,
    tooltip: { isHtml: true }
};
```

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

Solution

Problem

Related problems