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
Is there a way to support multiple Roll Ups…For Example I need to report Project Status (Green, Amber, Red) for Multiple Regions (North, South, East, West). My upper level roll up is Region and then Status under that.
Example:
+ North (5)
+ Green (1)
+ Amber (2)
+ Red (2)
+ South (8)
+ Green (4)
+ Amber (3)
+ Red (1)
+ East (15)
+ Green (9)
+ Amber (4)
+ Red (2)
+ West (3)
+ Green (1)
+ Amber (2)
So I would result in 4 charts, 1 for each region and then use the same color scale for each.
Is it possible??
Joe,
Glad to hear you got it working. In the example you describe with the 2-level grouping I did this by:
- Add 4 new views of the same list to the page you have your region/status multi-grouped view on.
- Set each new view to the same settings as the main list but filter eac by a region ie. one view grouped by status for North, one view for South, etc
So you should now have 5 views on the screen.
Add the chart script into a CEWP webpart (if not already done. You should now have 5 lists and 5 charts
Now to refine the view:
- go back into each of the 4 new grouped views you added for the regions and change the setting so that the webpart is not visible. After doing all 4, you sohuld have 1 grouped list and probably 5 charts
- go into the script in the CEWP editor and edit the script to not dsplay a chart for the first list on the screen. You can do this by adding an IF statement after the $each… line. In effect what you’re telling the script to do is don’t display a chart for the first list (your group/status view) but loop through the hidden Region specific views and display a chart for it.
Note: There is a way to just process/ignore based on grabbing the CEWP window name but you can look that up if you want to go that route.
Hope this helps.
John
I can’t get the multiple pie charts code working. Jquery is located in a document library to which a make a reference but it looks like it doesn’t know it is located there and the result is that i don’t see any charts.
The code for creating a single pie chart works perfectly. I just don’t get it. Can someone help me?
I have the same problem… could you fix it? If yes it wold be great to get the answer.
Erikver,
Can you post a little more information such as an extract of your code, information on format of the data views you are trying to display charts for etc…
Does the single chart work with one/all of the data views you are trying to use the multiple chart code for? Can you check the views individually to make sure it’s not a data problem?
thanks
john
Hi, I was really excited to read that the same list could be used for mulitple charts. I’ve made views on the list with a filter and then applied the same grouping parameter and totalling.
The lists are all arranged as instructed and when I run the page I get one large Piechart, tilted at an angle.
Having tried the first post in your series, looks like that. I did try another post and this gave me two graphs next to each other, based on your first work, though I can’t make it run for more than one list or one view on a list. -> http://wyly.wordpress.com/2009/04/24/adding-graphs-bar-and-pie-charts-to-sharepoint/
So I was quite exocted when I got to the third in your series and now I seem a tad lost. Any ideas what I may have done wrongly ?
regards
Niall
Thanks! This is exactly what I have been looking for since the birth of MOSS 2007.
Hello,
This help a lot.
But How can I genrate multiple charts dynamically.
I don’t know how many chart i need to genrate.
Here is scenario:
Lists:
(1)Project Name
(2)Project Status Montly Report.
I want to genrate chart for each project and want to presend infomration from “Montly Status Report” . Status report contains Estimated Time Vs Actual Time.
How can I do this.
Hi Satish,
All the charts are generated dynamically. Break your requirements down into steps:
- Can you create a grouped list of information you want to appear on a chart
– If you can’t format the data into a list then you will struggle to do a chart using this method
- Once you’ve got a list, look at the grouping so that the summary totals create the values you want on the chart
– Tip: If you want a chart to show each item in the list then just group by a unique value to each item
- Now you’ve got your group list you can follow all the previous instructions using the scripts provided to create your charts
regards
john
Dear all,
this is a great stuff… but unfortunately I can’t make it works!
I tried with the single graph and it works well (part1).
I tried to do use this multiple graph script but nothing appear… neither with the latest jQuery scipt nor the 1.3.2 store on google.
Could you please hhelp me?
Thanks a lot
Seb
I can’t get this to work either. Have 3 views from the same list, copied the script, edited for the script library and nothing. Not even an error message on the page. its as though the script doesn’t even load. anyone else get a response?
Nothing showing could be caused by several factors. Based on my learning of how to get this setup (I’m no expert) the 2 key ones for me were:
1. the path or access to your jscript library is not working.
2. the data can’t be parsed correctly so google charts doesn’t know what to show so shows nothing.
–
The easiest way I found to check (1) above is to view the source of the page you were expecting your charts to be displayed on. Do a text search for the line and copy the path and filename into the address of a new browser window. If you get a prompt to download the script then you’re OK.
To check (2) above:
- You views must be grouped
- Make sure you have NO totals set up on the views
- Make sure the group summary lines have a count in brackets such as ‘Department: All(3)’?
- Do not use commas in any of the text on which you want to group – if you must use a comma then you’ll need to edit the script to recognise when parsing the data
- The views with the grouped data must be place onto the same page as you CEWP with the script. Just make the views not visible if you want to show the graph only without the source data
Regards
John
Sorry sticky fingers….
The line ‘Do a text search for the line and copy the path and filename into the address of a new browser window.’ should have referred to the line of the source which have the script src reference to the jscript script.
I have a interactive chart that i am trying to use. i have group the list by two variables, one by Outocome and the other by building i want it to show up as a stacked bar chart showing each building in conjunction with the total for the outcome…in different colors…
anything will help
thanks
Brandon