Update [10/21/2009]: version 1.1 is available for download (see links below). Remember to set the jQuery path and the pictures path in the script before using it.
Craig Lowrie is a Network administrator at the Ear Science Institute (Australia). A couple days ago, he shared with me a very useful script, allowing to add color coding to SharePoint Gantt views.
Let’s start with the live demo (combined here with the Gantt slider):
http://www.pathtosharepoint.com/Gantt/
A SharePoint Gantt view is made of two sections: the Gantt view itself (not customizable), and underneath a “summary list” that displays the task properties. We have customized this view to display the priority levels.
Craig’s script works as follows:
- first, it scans the summary list to identify for each task the priority level.
- it then goes back to the Gantt view, and for each task it replaces the blue bar with the appropriate color (red/yellow/green). This is done by replacing the dozens of small blue images that make the Gantt view with custom images (yes, SharePoint uses one image per day!).
The files for this customization are available on my site’s download page (to download a file, right click on it and select “save target as”).
First, you’ll need to unzip BarImages.zip, and place the images created by Craig in a library.
Then you’ll need to place the script on the page that contains your Gantt view. You have two choices on the download page:
- either the script (ColorCodedGantt.txt) that you’ll paste in the source editor of a Content Editor Web Part
- or directly the Web Part itself (ColorCodedGantt.dwp) that you can import to your SharePoint page.
The last step consists in minor adjustments to the script:
- change the path to point to the library where you stored the images (PicturesPath in the script)
- The sample code calls the jQuery library available online from Google. You may want to link to your local jQuery library instead. Or remove the call if you already use jQuery on your page.
You can easily adapt the script to work with a choice list other than Priority. Simply replace (High|Normal|low) in the script with your own values.
Thanks for sharing Craig!
35 comments
Comments feed for this article
September 10, 2009 at 1:50 am
kaboilek
Hi Christophe, this is great but what I am trying to do is implement this to a schedule versus a task list. Therefore using Regions instead of Priorities. My question is where exactly do we place the images? Is it at the site level or at the collection level. I have created a picture library within the site of the schedule and used the url and the image are not showing up. I believe I have everything else working per your instructions.
Thanks in advance.
September 12, 2009 at 3:41 am
Christophe
The place where you store the pictures doesn’t really matter, as long as the users have read access. It could even be a Web site outside SharePoint.
Using regions? so you must have created a choice list like this:
(1) Region1
(2) Region2
(3) Region3
and changed the script to:
var regex = /\(\d\)\s(Region1|Region2|Region3)/;
September 12, 2009 at 10:25 am
kaboilek
Actually I added 5 and yes changed the regex to = the regions. I did add (#) as well. I will attempt another try and keep you posted. Thank you for the help.
September 16, 2009 at 12:17 pm
Sriram
Hi Christophe
Thanks for the intuitive idea to color code Gantt chart. I have extended the technique to highlight overrun tasks. http://www.iotap.com/Blogs/tabid/277/EntryId/115/Highlighting-Overrun-Tasks-In-Sharepoint-Gantt-Chart.aspx
Thanks
September 17, 2009 at 1:33 pm
René
Hello,
I’m trying this great feature but i cant get it working. Somehow the sliders pictures won’t show. I did as described but still it not work. when I right click on the the red cross (supposed to be colored sliders) I saw that the pictures don’t have numbers at the end? any help appreciated. Thanks!
September 17, 2009 at 1:53 pm
René
Nevermind i got it working i think this was a translate error since im using the project site in dutch.
September 21, 2009 at 11:49 am
Umka
hi Christophe!
i think i’ve followed all your inspiring ideas! they are great! i’m trying this with gantt view (thinking of absence calendar) but for some reason instead of pictures have same as Rene – red crosses. must be my image library not visible. cant find what it can be.
all users has read access to page and to library. any ideas? maybe there are some else restrictions to it?
September 22, 2009 at 12:03 pm
Christophe
Well, René has fixed his issue. I suggest that you right click on a red cross to see the properties, it’ll tell you what the browser is looking for.
September 22, 2009 at 5:25 pm
kaboilek
Hi Christophe,
I finally got around to see if I can get the images to appear and still no luck. Doing as you state above to Umka it is looking for StartNormal but it isn’t picking /StartNormal0.gif, /StartNormal1.gif etc. this is what it shows: StartNormalundefined.gif.
I have used the following for my choices:
(1) Central1
(2) East2
(3) Gulf3
and var regex = /\(\d\)\s(Central1|East2|Gulf3)/;
and I still am not able to bring up the images… I am so close darn it. What am I overlooking?
September 23, 2009 at 9:03 am
clowrie
Make sure you’ve add the column containing your regions to the gantt view. The region must be displayed in the table below the gantt chart for the code to work.
September 23, 2009 at 10:51 am
kaboilek
Hi clowrie, yes the columns that I have tried to use with the script have been included in the chart below the gantt. As of late yesterday I was able to bring up some of the images for the graph (I did a view source on Christophe’s gantt chart from the link above and copied the script from there) but not for all. I changed the column Region (using 5 choices) to Health only using 3 choices (Critical | At Risk | On Track) and only 2 of the images appear images1/CenterNormal3.gif and images1/CenterNormal2.gif.
I wish I could past the screen shot to show what it actually looks like.
September 23, 2009 at 11:15 am
kaboilek
Here is the code (which I included within the CQWP or the webpart from Christophe at the bottom of the gantt webpart):
$(function(){
// URL to the bar images
var PicturesPath = "/sites/AO/ivstechplanner/images1";
// Collect the priority level for each task
var barColours = new Array();
var regex = /\(\d\)\s(Critical|At Risk|On Track)/;
// Find the tasks summary list
var TasksList = $(".ms-summarystandardbody>tbody>tr:not(.ms-viewheadertr)");
if (TasksList.length == 0) TasksList = $(".ms-listviewtable>tbody>tr:not(.ms-viewheadertr)");
TasksList.each(function(i){
try {
barColours[i] = regex.exec($(this).text())[0].substr(1,1);
}
catch(err){}
});
// Modify the bar color according to priority
$(".ms-ganttTaskRow").each(function(i){
$(this).find("img").each(function(){
var source=this.src;
source = source.replace(/.gif/, barColours[i]+".gif");
source = source.replace(/\/_layouts\/images/,PicturesPath);
this.src=source;
});
});
});
September 23, 2009 at 2:00 pm
clowrie
Hi kaboilek, if you check the image properties (right click on the red X image place marker) and select properties, is the image name still showing up as “StartNormalundefined.gif”? If not verify that the image can be accessed directly by typing the path and filename directly into your browser ie: http:///sites/AO/ivstechplanner/images1/StartNormal1.gif
Also make sure your choices are exactly:
(1) Critical
(2) At Risk
(3) On Track
Check all capital letters (the code is case sensitive), and make sure there is a single space between the “)” and the first letter.
September 24, 2009 at 12:08 pm
Christophe
My two cents: maybe your issue is due to spaces in the names. Try replacing spaces with \s in the regular expression:
var regex = /\(\d\)\s(Critical|At\sRisk|On\sTrack)/;
September 24, 2009 at 12:35 pm
kaboilek
Okay I will try that but then why did it not work with the region? You know what would it make a difference if this was Intranet versus Internet?? I remember reading something about Web 2.0 not friendly with Intranet.
September 25, 2009 at 5:51 pm
kaboilek
Good News!
Wow you are not going to believe what was causing my issue and I had no idea that it would affect the script. I had the below table grouped by region by project. When I took the group selection away all the colors came into play in the gantt chart.
My next question is can we modify the script so that if you do group bys the script will work? No biggie but that would be awesome especially if you have over 100 items…. Anyway thank you one and all for the help!
September 25, 2009 at 7:43 pm
kaboilek
I also found out that the script will not work if you use the gantt within a web part.
September 26, 2009 at 5:02 am
Christophe
oh yeah, with this sample script, rows in the table have to match the rows in the Gantt, so the extra rows used for grouping will mess things up.
Sorry, I don’t get your last comment…
September 28, 2009 at 10:49 am
kaboilek
On my default page I have 2 web parts, one for the gantt and then one for your script. The colors do not appear when I have the page setup this way.
October 7, 2009 at 1:55 am
Christophe
Kathy, Craig and I are working on an updated version that should be easier to deal with. Please stay tuned, and thanks for your patience!
October 7, 2009 at 1:32 pm
kaboilek
You and Craig are wonderful!! thank you and I will stay tuned to this
October 14, 2009 at 1:28 am
clowrie
kaboilek, send me an e-mail: crlowrieATgmailDOTcom and I’ll see if I can help sort out your code issues.
November 1, 2009 at 6:25 am
Javed Khalid
Hey Guys,
I have tried using it but all in vain. If I insert a new content editor webpart it does not work, and i am unable to find the import for the .dwp file.
Please help!
Thanks
November 1, 2009 at 10:38 am
Christophe
There’s a tutorial for the import option on the Bamboo blog.
Color coding works fine on my demo page. Could you be more specific about your issue?
November 2, 2009 at 10:58 am
Javed Khalid
I am using the Gantt Chart for displaying vacation status and trainings in my website. I created this list using the “Project Tasks” under “Tracking” in the “Site Actions” —> “Create”
I want to display the vacations and trainings in the same Gantt with 2 different colors.
November 2, 2009 at 11:07 am
Christophe
OK, this should work with the above method. You’ll need to adapt it to reflect your two choices (instead of the three priority choices in the example).
November 4, 2009 at 10:13 pm
MontrealPaul
After days of checking every aspect of my implementation, I finally found why version 1.1 was not working for me. I saw this after scraping the previous version out of the example site.
One rather important part is missing: The code inside of the main tags needs to be defined as a function, like this:
$(function(){
// Set PicturesPath to the URL of the library that hosts the bar images:
var PicturesPath = "/pics"
etcetera, etcetera
})
(hope my formatting codes stick!)
Thought I’d post here, in the event it might help. It is possible that there’s some other way, that I don’t know of, to implement this, but inserting the ‘funciton’ code made it work for me!
November 4, 2009 at 10:46 pm
montrealpaul
Doh!
Not only were my “< s c r i p t " tags stripped (with good reason – should have thought of that!), but I also forgot the ending "< /code" tag (I've purposely left off the ending brackets here, lest those be stripped as well).
Unfortunately, it doesn't look like I can go back and edit it. Christophe, can you? I've just registered with WordPress, to see if this (and future) posts can be edited/deleted.
November 6, 2009 at 3:06 pm
Christophe
Paul, I think I get your point.
The code is supposed to be placed below the Gantt view and modify it. If you place it above, then you need to delay the execution until the page is loaded (as in your above script). I prefer the former as it happens earlier in the page load process.
December 8, 2009 at 8:08 am
Gantt demos – Update « Path to SharePoint
[...] The second demo shows a method to add color coding to the OOTB Gantt view. The color is based on the level of priority. More details here. [...]
January 11, 2010 at 6:34 pm
Jon
Can this color code be used for a sharepoint calendar with gantt view instead of a project task list?
Also, I would like to have a calendar gantt view for approx 20 individuals in my office but I would like to have only one line per individual and then color code (approx 5 categories) those tasks (i.e. vacation, office, Business trip, etc..). In short I don’t want to have one person with 30 separate lines associated. Thank you.
January 12, 2010 at 4:22 am
Christophe
This solution should work with any SharePoint Gantt view, just make sure you use the correct column names.
With the SharePoint Gantt view, you’ll get one task per line. To get what you want, you’ll need to pull the data from SharePoint and use a custom charting tool. For example FusionCharts free could work for you (scroll down to the Gantt section):
http://www.fusioncharts.com/free/gallery/
January 20, 2010 at 12:26 am
Spyder
So I have the BarImages in the /Picture sub folder of where my Gantt chart is and I have the CEWP with Craig’s script below my gantt WP. When I add Craig’s code the blue bars disappear and I don’t get any bars at all. I’m using the standard status values. I’ve also included the code that is supposed to hide the summary but it doesn’t work either. I’m suspecting that I’m not calling the jquery library properly but I don’t understand why or how to fix it. Any ideas?
January 28, 2010 at 12:47 pm
Christophe
Do you get red crosses instead of colors? If so it means that the path to your images is not correct.
January 28, 2010 at 3:23 pm
Spyder
No red crosses either.