Show values on google piechart legends - asp.net

Question

I have this google piechart, which is working fine, except on the legend text along with it, I wanna show the percentage and numbers. The below would be the code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 options = {
title: 'Registration',
legend: { position: 'right', textStyle: { color: 'blue', fontSize: 16 } }
};
$.ajax({
type: "POST",
url: "adminrep.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px; margin-top:60px;"></div>
How do I get this done? Thanks in advance.

Answer 1

Try using .setFormattedValue to format the the labels in the DataTable.
This still requires you do a little bit of manual calculation for the getting the total sum of values, but it should work:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 options = {
title: 'Registration',
legend: {
position: 'right',
textStyle: { color: 'blue', fontSize: 16 }
}
};
$.ajax({
type: "POST",
url: "/echo/json/",
data: {
json: JSON.stringify({
d: [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]})
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var count = data.getNumberOfRows();
var values = Array(count).fill().map(function(v, i) {
return data.getValue(i, 1);
});
var total = google.visualization.data.sum(values);
values.forEach(function(v, i) {
var key = data.getValue(i, 0);
var val = data.getValue(i, 1);
data.setFormattedValue(i, 0, key + ' (' + (val/total * 100).toFixed(1) + '%)');
});
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px; margin-top:60px;"></div>
Example: https://jsfiddle.net/cn74tvmL/show

Answer 2

You need to use number format:
var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);
or:
chart1.options = {
.
.
.
pieSliceText: 'value',
legend: {
position: 'labeled',
labeledValueText: 'both',
textStyle: {
color: 'blue',
fontSize: 14
}
}
};