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
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.
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:
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.
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’ />”;
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!
Here is the code that I used to do the two pie charts side by side:
Change the keywords at the top of the code to the name of the categories you are grouping by… Good Luck!