Google Chart Tools - Display Live Data on your site.

Hi, I am trying to give one POC (Proof of Concept) to my client, requirment is to show the attractive reports, without any deployment, with only ADMIN rights to one of the SharePoint 2007 site.

I searched a lot and finally decide to go with Google Chart Tools. We can fetch the data from sharepoint list view webpart and can create the chart in SharePoint page using javascript.

Here is the simple example...

and the code to get the above result is..

<div id="chart_div1"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
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(){
google.setOnLoadCallback(drawChart1);
});

function drawChart1() {
var arrayList=$("td.ms-gb:contains('Implemented Solution')");
var coord= new Array();
var labels= new Array();
var titles= new Array();
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;
});


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

var data = new google.visualization.DataTable();
data.addColumn('string', 'Technology Env');
data.addColumn('number', 'Application');
data.addRows(coord.length);

for(i=0;i<coord.length;i++)
{
data.setValue(i, 0, titles[i]);
data.setValue(i, 1, parseInt(coord[i]));
}

var chart1 = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart1.draw(data, {width: 600, height: 440, title: 'Implemented Solution', is3D:true, vAxis: {title: '', titleTextStyle: {color: 'red'}}});
}

</script>

For more Information .... Google Chart Tools