Tuesday, February 23, 2010

AJAX chart integration with a Sharepoint list

1. Have the jqury installed to the local site or just refer the google API.
2. Type the following code in you CEWP's source!

<div id="jLoadMe" class="content"><strong>Name to display</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();
$.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;
var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1);
// Extract the labels
labels[i]=txt1+"("+txt+")";
//add also coordinates for better read });
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=p3&chs=750x200&chd=t:"+txt+"&chl="+txt1+"'/>"; $("#jLoadMe").append("<p>"+vinc+"</p>")});
</script>