Finally: Dynamic charting in WSS, no code required! – Part 3 – Multiple Pie Charts
- 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

I finally got a script to get multiple Pie Charts on the same page!!!
In the screenshot, I show a hypothetical systems issues list, grouped by priority, status, system and site. You can represent different views of the same list or you can include multiple lists!!!
NOTE 1: avoid group by columns with “(” and “)” symbols as part of its name. Otherwise you should modify the code accordingly, because those are used to isolate the number of items within each group.
NOTE 2: do not use this technique to represent sensitive data, as it travels through the Internet to the Google Charts service.
Here is the process to implement:
1) Plan your page, that is, pre-define how many charts you will need (for some reason, if you add List View web parts AFTER you have inserted the script, new charts might not be rendered).
2) Create the Grouped views that you will need through the default List View, so when you add the list views to the page, you can simply select the desired view from the drop down list.
3) Create a new web part page, add the List View web parts you previously defined, and arrange them (up to down, left to right) in the order you want the charts to appear.
4) Copy the script to your preferred editor and:
- a) Configure the colors for your charts in the following code line:
chColor=new Array(”FF6600″,”006600″,”000066″,”C0C0C0″);
If you plan to use more than 4 charts, add more color codes with the same pattern. - b) If you want, change the size (in pixels) and type of chart (”p” or “p3″) in the following portion of the URL for the charts:
…chart.apis.google.com/chart?cht=p&;chco=”+col+”&;chs=500×150&;chd=t:”+txt+”&;chl=”+txt1
For more information on how to customize the chart, see http://code.google.com/apis/chart/ - c) Edit the path at the beginning of the script so it points to your jQuery library store.
5) Insert a CEWP (Content Editor Web Part) on the page, open the toolpane, then Source Editor and paste the script you have just configured. That’s it!
6) You can hide part or all the List Views so the page does not look “congested”. To do so, open the tool pane of the List View web parts, go to the “Layout” section and check “Hidden”.
I hope you enjoy this!
<div id="jLoadMe" class="content"><strong></strong></div> <script src="/jquery/jquery.js" type="text/javascript"> // To load jQuery (redefine the path if necessary) </script> <script type="text/javascript"> /* * WORKING VERSION 1.0 * Multiple Pie Charts in SharePoint * By Claudio Cabaleyro (2009) */ $("document").ready(function () { chColor=new Array("FF6600","006600","000066","C0C0C0");// add more colors if you include more than 4 ListView web parts var ListViewArray = $('table.ms-listviewtable'); $(ListViewArray).each (function(j) { var Grp = $(this).find ('td.ms-gb:contains(':')'); var coord= new Array(); var labels= new Array(); $.each(Grp, 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("|"); col= chColor[j]; // Adjust Chart Properties below - See Google Charts API for reference var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&;chco="+col+"&;chs=500x150&;chd=t:"+txt+"&;chl="+txt1+"'/>"; if (j%2 == 0) ; else vinc=vinc +"<br>"; $("#jLoadMe").append(vinc) }); })(); </script>
Claudio Cabaleyro
MOSS 2007 – (almost) no-code solutions
- 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
I cant seem to get this to work for me, I am able to follow the steps in Part 1 and display one chart against my list. But trying to get the Multiple charts is not working for me..I have the 4 views built, added them to a web part page but see no charts after adding the CEWP with the code..any ideas?
I can’t get this working either. Previous examples with a single chart worked no problem so not sure on why multiple charts not loading.
The result I get is just the Chrome header with no window displaying anything at all.
thanks
This is a nice solution. One thing that would be a great addition would be great to have some level of “drill down” available.
I’m having the same problem. Is there code in the single chart example that needs to be entered in multiple?
I was having the same problem with the charts not showing up. Try making this small change, and it should work for you:
Change:
(’td.ms-gb:contains(’:')’);
To:
(”td.ms-gb:contains(’:')”);
Patrik, John, Devin,
A potential problem is with “quotes within quotes” in the following selector:
(’td.ms-gb:contains(’:')’);
Try replacing the internal single quotes by double quotes or simply replace the above selector by:
(’td.ms-gb’);
I have tested the solution with IE and Firefox, but not with other browsers.
chris,
Nice idea. I think that we can try adding a “on-click” event to the bar charts redirecting to the underlying list view. I will try to work on it.
Regards
Very cool idea.
Is it possible to use other chart types?
Many thanks. Now got it working. However in addition to the change to the line:
(’td.ms-gb:contains(’:’)’);
I have also had to remove each ; following the & on the line to ensure it fits with google charts syntax:
var vinc= “<IMG src…..
Again, many thanks.
I’m having the same problem, single chart works great, multiple charts..nothing displays.
I’ve updated the code with Andrew and John’s suggestions, still doesn’t work.
Anything else I can try?
Scott,
You had asked:
“Is it possible to use other chart types?”
You may want to take a look at the following link;
http://code.google.com/apis/chart/types.html
In the code that claudio has provided, you would modify the “cht”, (chart type), definition to change the chart type;
var vinc= “”;
if (j%2 == 0)
sorry, part of my post got cut off. find the line that says // Adjust Chart Properties below – See Google Charts API for reference
and modify accordingly.
If it helps others I was able to add chart headings and hyperlinks (to the original source data for those that want to drill into this) to the multiple charts. Probably not the most elegant method but did the job for me.
To do this I added 2 new arrays afer the chColor array setup. One array for titles, one for links. ie.
chlinks= new array (”url for chart1 here”,”url for chart2 here”…);
Within the code loop then add lines to extract the title/link for the list group being processed i.e. linktolist= chlinks[j];
On the line:
var vinc=”….
I then added in the necessary additional parts to get:
var vinc-”“;
If you add a title then you need to insert the chtt google chart parameter and I also added the chts option as well to highlight the title.
(Note: I found the multiple charts wtih hyperlinks looked better without the image border but you may want to remove the border=0 bit.
Claudio, thanks for the excellent articles.
John
Oops, text missing from above for some reason. the var vinc line should read (if it submits this time):
var vinc= ““;
give up, hopefully you can work it out :-(
Hello All
I also try to implement multiple pie chart. First I added 4 different views and on top of all view aded contend editor and added above mentiond scripts.
But surpsingly last 3 charts are displaying and top 1 chart is not displaying.
I replaced (’td.ms-gb’) and also remove each ; following the & on the line to ensure it fits with google charts syntax:
var vinc= “<IMG src…..
Before this only 4 blank images are displaying, but after this charts are displaying but only 3
and also
Any clue
I had this once with one of mine. I found that the cause of my problem was an ampersand in the group label of the first label on the chart. Because the parsing takes the ampersand as part of the query structure and not literally it fails to generate any data/labels for the chart in question thereby leaving a big gap where your chart should be. I fixed it by simply replacing the ampersand with the word AND in my group labels.
If its not caused by this though then I don’t know, sorry.
John
Hey John
I am newbie, can you explain in detail? If possible, please provide steps.
erm… I’m no expert either and will thank Claudio again for his good article – I’ve just tweaked slightly for my own use.
OK, previous posting was confusing with my reference to labels I think. I was refering to the labels that appear on the chart. These labels come from the text contained within the column by which you are grouping your list view.
What I was trying to explain was:
- the charts work based on a list view that has been grouped, which I believe you’re OK with as you’ve already got 3 charts working
- the text contained within each item in your list for the column used to group the information needs to be alphanumeric text only with no special characters such as apostrophes, ampersands etc (all special characters may not be a problem but I’ve not checked so I exclude all just to be sure). So if you had:
Col1 Col2 Col3
Dave blue 24
John red 25
Steve blue 27
And grouped a list view by Col2 ready for your chart, then make sure there are no apostrophes or ampersand characters in any of the list entries in Col2. So the next entry in the list couldn’t be light’blue
If I’ve still not explained very clearly then apologies and I’ll have to defer to someone else to assist.
Hello John
Thanks for rethe repsponse. I checked any group label doesnt have AND, hoever group level have ‘(’ like “(1) High”. I noticed that this particulars view chart is not displaying.
Let me know how do I resolve this? As this production site I can change the field value from “(1) High” to “High”.
Please advise
Disha
I was able to get three pie charts to display, but I would like to have them three across. Right now they display as two charts in the top row and one on a second row. I inserted my List View web parts up three across. I tried reducing my pixel size, but that did not work. Any idea how to make the pie charts display three across on one line directly above the List View web parts?
I am also noticed 1 more issue, if any group name having space, it wont display. For Example if group name is “Region Name”, chart wont appear.
Any idea?
Scott,
Near the end of the script are a couple of lines that control the layout by inserting breaks based on a Modulas of 2 calc. You need to change this to a modulas of 3 NOT equal to 0 (but add 1 to j first to account for the 0 value). So it could become if ((j+1) % 3 != 0) …
Disha,
Script works fine with space here for lots of charts. I still think your problem relates to having an apostrophe, ampersand of other special character in the group name somewhere – if not a visible one, are there any hidden characters?
John
I group by severity which are returning in list as
Severity:High (12)
Severity:Medium (4)
Severity:Low (9)
Severity:(45) – All those issue where severity is not asssigned.
In 4 different views there are some record where there is no value assigned so there are returning record count without any group label.
Any idea
Here is my code
here is top of the code
// To load jQuery (redefine the path if necessary)
and there is at endd of code
this is because there is no label assigned to display. Add a new calculated column which does something like “=IF([Severity]=”",”No Severity Assigned”,[Severity])”. Then change the grouping of your view to use the newly added column.
Hello All
Please discard my earlier two poset, I resolved the problem, it is my mistake. Actially after selecting views thne I was doing grouping in view web part, that is why it was not showing.
Now I want to display title for each chart, can anyone guide me step by step.
Disha
FOr each chart title I did followng
I added following next to chColor array
chltitle= new Array (”Title 1″,”Title 2″,”Title 3″,”5″);
Then added following line before var=vinc”"
title = chltitle[j];
Then added title in follwing
var vinc= “”;
But it is displaying as “title”, not displaying values.
Any idea whats wrong I am doing here?
Disha
I have the multi chart version working without titles. I’m trying to follow all of the changes and have to admit that it’s a bit confusing to piece together the mods to add titles.
Could some repost the entire set of code with the title mod included?
thanks
Hello
I have generated multiple pie chart, but each chart is not displaying as per the value, it is distributing and displayin equalyy diesnt matter what is the values. I have uploaded images on
http://www.kgfassociates.com/chart.jpeg
Please let me know how do I display properly. If you see the claudio multiple chart, it is displaying properly.
Please advise
Claudio
If possible please respond mylast 2 post please..
Disha
John, could you provide a full sample of the code with headins and drill throughs. I think I see waht you are trying to do, but failing to get it right.
eric,
I use an 8 chart dashboard with option to have different chart types so see below for how I have it setup:
for info, Claudio has now also provided a jschart version with headings and click through so no need to use google charts. See http://www.endusersharepoint.com/?p=1714
john
Great, thank you. I’m not sure what method will be best to use for our case, so this will help.
I put an alert to see how many tables are in the ListViewArray and it returns 0 even though 3 tables are displayed on the page.
This is really good stuff.
How do you suppress the Google title from displaying in your chart web part. Mine is showing “Pie Chart using Google Charting API”? It messes up the alignment of the charts.
Thanks
Duh.
Never mind, I see it.
Claudio’s code and the solutions presented are brilliant! This is precisely what we needed, especially the multiple graphs on a single page. We are not coders or developers by any means and since we are a non-profit, we have no budget for SharePoint add-ons like EPM Live, nor do we have budget for developer time.
A couple of quick(?) questions:
1) Let’s say we have a list of projects that includes budget information. We want to create a line chart that shows the projects across the x-axis and the budget amounts as data points with the dollar amounts along the y-axis. Using the sum method proposed by Mark Miller doesn’t help here. Neither does using the grouping method that Claudio outlines on his pages. How would we create such a chart?
2) Let’s say we have the same list of projects from #1. We would again like to do a line chart with the budget information but do a second line on the same graph with Actual Cost for each project; i.e. the underlying question is how do we create multiple lines on a single chart for comparison?
Best regards-
Daniel
I actually found a problem with the posted code for this. I made the corrections as noted:
Change
(’td.ms-gb:contains(’:’)’);
To
(’td.ms-gb’);
And remove all ; from the Google Charts link.
I have 4 grouped lists and the charts for these display fine. However, before these 4 is a 5th which is blank. That is, there is a blank space, then the 4 graphs. I inserted a debug line to print the value of j because I thought it was just an issue with spacing or something. However, it really thinks there is a chart in that deadspace. j=0 for the first(blank) chart.
My theory is that the code is picking up it’s own CEWP and trying to display a chart for it. Since there is no data, it displays nothing. Anyone else have this issue?
I have a workaround for this problem that displays an initial blank chart. I put the var vinc=”… into an if…else… where I check to see if txt==”. This excludes the first set of data that the remaining logic is picking up from somewhere. Has no one else seen this???
Hi D.G.,
Creating charts using numbers other that count of grouped items require changing the selector:
(”td.ms-gb:contains(’:')”);
to something different. Check Bob’s comment on my previous post at http://www.endusersharepoint.com/?p=1537, as he was able to represent column subtotals instead of count of items.
By the way, and regarding your second comment, there is a transcription problem in the original code: check double and single quotes in the above mentioned selector, because eliminating the colon between single quotes is the probable reason for you getting a blank cell in the dashboard page.
Hope this helps
Looking at the post, i have tried and its great. But i still trying to find a way to have a url link to the graph/charts in order for me to drill-down to the tables for more details. Therefore i can leave the graphs/charts as it is on-display and if necessary for the users to click and see the details afterwards.
Any suggestions.
I am still looking for a way to chart a column of values from a list, not the summation or grouped view of those values. No one has been able to answer that for me. E.g. I have a list of 30 different active projects and I want to chart their BAC vs. Actual Cost as two lines on a chart.
If someone can solve this for me, I will buy them a latté of their choice from Starbucks. :)
To D.G.
To get a value for each project I reckon the quickest way is to just do a group view by project name. You’ll then get totals for each project that you can show on your chart without having to change any/much of the code.
John
Thanks so much for this great series! I am just wondering if you can help me figure how to limit the chart contents to only data in the current web part zone? Is this possible?
I am trying to get this to work with no success what so ever. Below is the code that I am using. I borrowed the code sample form john and I am starting with 2 charts, and will build up from there. PLEASE HELP!
Overall Project Health
In step 4…what is “THE SCRIPT”?
4) Copy the script to your preferred editor
Joe,
The script is the javascript text listed at the end of the information Claudio… provided a few lines below point the (4) you referred to.
regards
Thanks John…
I was unable to get that to work, and took an interation of your code posted above and tried to get that to work. Nothing renders on my site…any thoughts?
I finally got Cladio’s code to work…all the extra spaces and ‘;’ and sigle quotes where tough to find…I missed one and it threw me. I will now try your code to make them linkable.
thanks … awesome code!