Claudio Cabaleyro wrote a series of articles for us on using the Google Charts API to expose charts and graphs in SharePoint without recourse deployment or server installation. We have put together a live, online workshop, SharePoint Charts and Graphs without Excel Services, that utilizes some of Claudio’s solutions.

In this three minute screencast, I show how data from a simple SharePoint list can be pulled into a Content Editor Web Part to dynamically generate a bar chart. The cut-and-paste-code for the solution is below the screencast.

To implement the solution, create a view that exposes sums at the top of the columns. Put a CEWP on the page and paste the code. We are still tweaking the code a bit to make it more flexible, but this should work as is.

If you like this solution, we’ll be showing much more during the workshop. Hope to see you there.

Embed this screencast on your site.

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

<script type="text/javascript">
if(typeof jQuery=="undefined"){
	var jQPath="/javascripts/";
	document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>

<script type="text/javascript">
/*
* Google Chart for list column totals
* By Claudio Cabaleyro (2009)
*/ 

$("document").ready(function ($) { 

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 .ms-vb",".ms-viewheadertr ");		//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=$('#aggr tr > td:not(.ms-vb)') 	//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))
// alert(BuildChartURL(Totals, Titles)); // debug line

})(jQuery);
 </script>