Dynamic Charts & Graphs in SharePoint (Part II)

SharePoint allows you to define list views that calculate Sum, Average, Min, Max, Standard Dev, etc. on the items, whenever your list has at least one numeric field or column.

The script below, combined with such a list view, will plot a Google Chart showing those totals dynamically. The chart scale is automatically adjusted with the maximum value to be charted so it fits the designated size in the script.

Once implemented, you can hide the list view web part so only the chart will render on the page. You can also play around with chart parameters within the script, to change chart type, style, size, colors or even build more complex charts. Take a look at the Google Chart API page for reference.

Hope this could be useful.

Here a step-by-step screen capture series:

<div id="jLoadMe" class="content"></div>



<script src="/jquery/jquery.js" type="text/javascript">

   // To load jQuery (redefine the path if necessary)

</script>



<script type="text/javascript">  

/*

* Google Chart for list column totals

* By Claudio Cabaleyro (2009)

*/ 



Array.prototype.max = function() {       // function to get the maximum value of Y axis

var max = this[0];

var len = this.length;

for (var i = 1; i < len; i++) if (this[i] > max) max = this[i];

return max;

}



function BuildChartURL(Data, Names)       // Adjust Chart Properties below - See Google Charts API for reference 

 {

  MaxData= Math.round(1.1*Data.max()).toString();

 var  DataPoints= "&amp;chd=t:"+Data.join(",");

 var  DataTitles= "&amp;chl="+Names.join("|");

 var  ChType= "cht=bvs";        // Vertical bars type

 var  ChSize = "&amp;chs=300x200";     //HeighxWidth in px

 var  ChScale = "&amp;chds=0,"+MaxData;    //Vertical scale: 0 through 10% over max series value

 var  ChLabels ="&amp;chm=N,000000,0,-1,11,-1";

 return ("<p><IMG src='http://chart.apis.google.com/chart?"+ChType+ChSize+DataPoints+DataTitles+ChScale+ChLabels+"'/></p>");

 }



 

var ArrayTitle= $('.ms-unselectedtitle:html');  //find all columns in titles row

var TitleTxt = new (Array);

$.each(ArrayTitle, function(i,e) 

 {

 TitleTxt[i] = $(e).text();  // Store ALL column titles in TitleTxt

 });



var ArrayTotal= $('.ms-vb2', $('#aggr'));    //find all columns in totals row

var TotalTxt = new (Array);

$.each(ArrayTotal, function(i,e)

 {

 TotalTxt[i] = $(e).text().substr($(e).text().indexOf("= ")+2); // Store ALL column totals in TotalTxt 

 });

 

var Titles = new (Array);

var Totals = new (Array); 

$.each(TitleTxt, function(i,e)  // clear empty elements in totals row

 {

 if (TotalTxt[i] != "" && TotalTxt[i] != null)

  {

  Titles.push(TitleTxt[i]);

  Totals.push(parseFloat(TotalTxt[i].replace(',','')));

  }

 });



$("#jLoadMe").append(BuildChartURL(Totals, Titles))

 </script>