API will return the PNG format image in response to a URL, Advantage! Now you can render several types of images
Including Line charts, Bar charts, Pie charts, Venn diagrams, Scatter plots, Radar charts, Maps ,Google-o-meters & QR codes.
API URL must be in the following format:
http://chart.apis.google.com/chart?
Where:
http://chart.apis.google.com/chart? is the Chart API's location.
& separates parameters.
chs=250x100 is the chart's size in pixels.
chd=t:60,40 is the chart's data.
cht=p3 is the chart's type.
chl=HelloWorld is the chart's label.
Results:
Steps:
1. Choose the List
2. Create a Group By View on that List.
3. Now Create a new web part page
4. Add the List to this web part page (Selected List in step 1)
i. Set the current view to Group by new which we created in the step 2
ii. Then Under the Layouts choose/check the Hidden
5. Add the Content Editor web part to the same web part page.
6. Copy below code & you are done!!.
<div id="PieChart" class="content"><strong>Pie Chart Using Google Charting API</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 cord= new Array();
var lblTxt= new Array();
$.each(arrayList, function(i,e)
{
var varIf= $(e).text();
var CordTxt= varIf.substring(varIf.indexOf('(')+1,varIf.length-1); // Extract the 'Y' coordinates
cord[i]=CordTxt;
var LabelTxt= varIf.substring(varIf.indexOf(':')+2,varIf.indexOf("(")-1); // Extract the labels
lblTxt[i]=LabelTxt+"("+CordTxt+")"; //add also coordinates for better read
});
var CordTxt= cord.join(",");
var LabelTxt= lblTxt.join("");
var APIurlWithValues= "<IMG src='http://chart.apis.google.com/chart?cht=p3&chs=750x200&chd=t:"+CordTxt+"&chl="+LabelTxt+"'/>";
$("#PieChart").append("<p>"+APIurlWithValues+"</p>")});
</script>
