Make a pie chart that shows percents

 

Update: The code I had originally posted was hard to copy and not figuring the percentage accurately. This has been corrected.

This is a quick update to Claudio Cabaleyro’s ground breaking blog on endusersharepoint.com to use jquery and google charts api to create pie charts of SharePoint List data.

Here is Cabaleyro’s code slightly modified to show the percent instead of the count of items from the list. Hope this helps anyone who has been looking for this solution.

Copy and paste the following code

<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>
<div id="jLoadMe" class="content"><strong>Item by percent</strong></div>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>
<script
type="text/javascript">
$("document").ready(function(){
var arrayList=$("td.ms-gb:contains(':')");
var coord= new Array();
var labels= new Array();
var titles= new Array();
var total=0

$.each(arrayList, function(i,e)
{
var MyIf= $(e).text();
var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the ‘Y' coordinates
coord[i]=txt;
total=total+(txt*1)
var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
titles[i]=txt1;
//labels[i]=titles[i]+"("+coord[i]"; //update the total
//labels[i]=titles[i]+"("+Math.round((coord[i]/total*100)*10)/10+"%)"; //update the total
});

for(i=0;i<coord.length;i++)
{
coord[i]=Math.round((coord[i]/total*100)*10)/10
labels[i]=titles[i]+"("+coord[i]+"%)"; //update the total
}

var txt= coord.join(",");
var txt1= labels.join("|");

// Adjust Chart Properties below – See Google Charts API for reference
var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=300x120&chd=t:"+txt+"&chl="+txt1+"&chco=FF0000' />";
$("#jLoadMe").append("
"+vinc+"
")
});

</script>