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= "&chd=t:"+Data.join(",");
var DataTitles= "&chl="+Names.join("|");
var ChType= "cht=bvs"; // Vertical bars type
var ChSize = "&chs=300x200"; //HeighxWidth in px
var ChScale = "&chds=0,"+MaxData; //Vertical scale: 0 through 10% over max series value
var ChLabels ="&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>
