Adding Graphs, Bar and Pie Charts to SharePoint

Here is a quick trick I learned today that solves an issue I’ve been having for awhile now.  How to quickly make charts and graphs that pull dynamically from SharePoint Lists.

Screen Shot of the finished product:

Claudio Cabaleyro posted this article on endusersharepoint.com on how to use jquery and google charts to pull info off of SharePoint Lists and display it as a Pie Chart.  I tried it out and it literally took me 1 minute to have my first pie chart.  I quickly saw some limitations that people may run into and in this article I will talk about some tweaks I did to Claudio’s code to do some very cool stuff.

First off, the code works by rooting for any table cell that has the class “ms-gb” and then checks to see if that cell has an “:” in it.  Here is the code

var arrayList=$(“td.ms-gb:contains(‘:’)”);

This works fine except if you want to have multiple graphs on the same page, then the code would tally all your lists together regardless if they were related or not.  If you would like to have more than on graph here is how to edit that line of code.

var arrayList=$(“td.ms-gb:contains(‘[name of column that's grouped]‘)”);

Since my first list was grouped om the Category so I put Category in there instead of the colon.
var arrayList=$(“td.ms-gb:contains(‘Category’)”);

My second graph, I made another list and grouped it by Status, I copied and pasted the code a second time in the second instance I changed the code to:
var arrayList=$(“td.ms-gb:contains(‘Status’)”);

Now at least you can have multiple graphs as long as the column names that are doing the grouping are different.  I also made an update to the second div tag id to prevent there being two identical id’s from being on the same page.  On the second div <div id=”jLoadMe” class=”content”> I changed to <div id=”jLoadMe2″ class=”content”> at the end where it dumps the information I updated $(“#jLoadMe”).append to $(“#jLoadMe2″).append

Since I did not one of the lists to actually show up I went to layouts and checked the hidden box, and the pie chart continued to work fine.

Other notes:

I went to google charts at http://code.google.com/apis/chart/ and spent some time learning how to customize the charts a little bit.

To change the color all you have to do is add &chco=#[Hexadecimal color number], the &chs=250×100 tells the width and heigth of the cart image and you can change the piechart to a non-3d chart with the cht=p here is what my code looked like when it was done.

var vinc= “<IMG src=’http://chart.apis.google.com/chart?cht=p&chs=250×100&chd=t:”+txt+”&chl=”+txt1+”&chco=0000FF’ />”;
 $(“#jLoadMe”).append(“<p>”+vinc+”</p>”)

Here is what the chart looked like:

I hope the rest of you find this solution as useful as I did.  As I said, I had a dynamic charts of my SharePoint Lists up in minutes!

UPDATE!
Here is the code that I used to do the two pie charts side by side:

<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">
var chartkeyword = [];
var chartcolor = [];

////////////////////////// Customizations /////////////////////////////////

chartkeyword[1]="Status" 	//name of the first column that's grouped
chartkeyword[2]="Category"	//name of the second column that's grouped

chartcolor[1]="FF0000"		//Color of Pie Chart 1
chartcolor[2]="0000FF"		//Color of Pie Chart 2

var charts=2

</script>
<table width=100%><tr>
<td><div id="jLoadMex1" class="content"><strong>

<!------------- Name of Chart 1 -------------------------->
Add a Name Here

</strong></div></td>
<td><div id="jLoadMex2" class="content"><strong>

<!------------- Name of Chart 2 -------------------------->
Add a Name Here

</strong></div></td>
</tr></table>

<script type="text/javascript">
$("document").ready(function(){

for(var i=1;i<=2;i++)
{
makeChart(i)
}
});

function makeChart(i)
{
	var arrayList=$("td.ms-gb:contains('" + chartkeyword[i] + "')");
	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=p&chs=320x120&chd=t:"+txt+"&chl="+txt1+"&chco="+chartcolor[i]+"' />";
	$("#jLoadMex"+i).append("<p>"+vinc+"</p>")
}

</script>

Change the keywords at the top of the code to the name of the categories you are grouping by… Good Luck!

---

Possibly related posts: (automatically generated)