Dynamic charting in WSS, no code required!

 

          Finally: Dynamic charting in WSS, no code required!

• Finally: Dynamic charting in WSS, no code required! - Part 2
• Finally: Dynamic charting in WSS, no code required! - Part 3 - Multiple Pie Charts

A note from Mark Miller: When i first saw this solution, my jaw dropped! Could this actually be a viable alternative for WSS users who don’t have Excel Services? You be the judge… please give Claudio some feedback on how you will use his solution.
 Update: The script has been updated so that the page loads before the script is triggered. You can read more about it in the comments.
Inspired by the GREAT jQuery series by Paul Grenier at EndUserSharePoint and the TERRIFIC ideas of Christophe at Sparklines and other charts in SharePoint lists, I have built a small jQuery script and used Google Charts service to get the following (click to enlarge):
I based the example in a FAQ list, so the chart shows the distribution of questions among the different "Topics". Being a little more general, the chart shows the statistical distribution of items from an underlying SharePoint list, being the groups defined by the meaning of the column chosen to "Group by" in the list view. You can think of representing statuses of an issues list, completion percentages on a task list, and so on. You can even explore the use of calculated columns in innovative ways to define your groups... (I just thought about that!)

Solution

I will not present a detailed step-by-step approach here, you can drop me a note if you have doubts. Recipe:

1. On the list you want to base your chart, create a "Group By" view.
2. Create a new web part page and insert the just created list view.
3. Insert a Content Editor Web Part and paste the code below (remember to use the Source Editor).

That's it! NOTICE: if you are new to jQuery, you need to install it prior to use the code. You just need to upload it on a Document Library as explained here, Do not forget to adjust the path at the beginning of the code, to point to your library. *** UPDATE: when you copy the code to your script editor, take a look at quotes (single and double) as they can cause a wrong script.

view source

print?

01	<div id="jLoadMe" class="content"><strong>Pie Chart Using Google Charting API</strong></div>

02	<script type="text/javascript">

03	if(typeof jQuery=="undefined"){

04	var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";

05	document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");

06

}

07

</script>

08

09

<script

10	type="text/javascript">

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

12	var arrayList=$("td.ms-gb:contains(':')");

13	var coord= new Array();

14	var labels= new Array();

15	$.each(arrayList, function(i,e)

16

{

17	var MyIf= $(e).text();

18	var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates

19	coord[i]=txt;

20	var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels

21	labels[i]=txt1+"("+txt+")";   //add also coordinates for better read

22

});

23	var txt= coord.join(",");

24	var txt1= labels.join("|");

25	// Adjust Chart Properties below - See Google Charts API for reference

26	var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p3&chs=750x200&chd=t:"+txt+"&chl="+txt1+"'/>";

27	$("#jLoadMe").append("<p>"+vinc+"</p>")

28

});

29

30

</script>

Tips and Tricks

TIP I: you can hide the list view in your page so only the chart is rendered (click to enlarge): To do that, edit the page and look for the "Hidden" check box in the web part panel(click to enlarge): TIP II: you can experiment changing the chart type, colors and size through the parameters in the URL