Color Coded Gantt View

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.

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?

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.

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?

Here you have the code for two colours on every gantt row.
In this case we have a vacation and in that vacation there is two dates where the row is suppose to be in a different colour.

The two new dates are taken from the list under the gantt view.

// Set PicturesPath to the URL of the library that hosts the bar images:

var PicturesPath = “/GanttImages”;

// Collect the priority level for each task
var barColours = new Array();
var jourColours = new Array();
var regex = /\(\d\)\s(Ledig|Semester|Jour)/;
// Find the tasks summary list
var TasksList = $(“.ms-ganttOuterTable”).siblings(“table”).find(“.ms-summarystandardbody>tbody>tr:not(.ms-viewheadertr)”);
if (TasksList.length == 0) TasksList = $(“.ms-ganttOuterTable”).siblings(“table”).find(“.ms-listviewtable>tbody>tr:not(.ms-viewheadertr)”);

TasksList.each(function(i){
try {

barColours[i] = regex.exec($(this).text())[0].substr(1,1);
}
catch(err) {barColours[i] =”";};

try {

var vacationStartDate = $.datepicker.parseDate(“yy-mm-dd”, $(this).find(“td:nth-child(4)”).text());
var vacationEndDate = $.datepicker.parseDate(“yy-mm-dd”, $(this).find(“td:nth-child(5)”).text());
var jourStartDate = $.datepicker.parseDate(“yy-mm-dd”, $(this).find(“td:nth-child(6)”).text());
var jourEndDate = $.datepicker.parseDate(“yy-mm-dd”, $(this).find(“td:nth-child(7)”).text());

var day = 1000 * 60 * 60 * 24;
var jourStartIndex = jourStartDate.getTime() – vacationStartDate.getTime();
var jourEndIndex = jourEndDate.getTime() – vacationStartDate.getTime();

jourStartIndex = Math.ceil(jourStartIndex / day);
jourEndIndex = Math.ceil(jourEndIndex / day);
jourColours[i] = { start: jourStartIndex , end: jourEndIndex };

}
catch(err) {
};

});
// Modify the bar color according to priority
$(“.ms-ganttTaskRow”).each(function(i){
$(this).find(“img”).each(function(j){
var jourInfo = jourColours[i];
var source=this.src;

if (jourInfo != undefined &&
jourInfo.start != undefined &&
jourInfo.end != undefined &&
j >= jourInfo.start &&
j <= jourInfo.end ) {
source = source.replace(/.gif/, "3.gif");
} else {
source = source.replace(/.gif/, barColours[i]+".gif");
};
source = source.replace(/\/_layouts\/images/,PicturesPath);
this.src=source;
});
});

//Optional: hide the list under the Gantt view
$(".ms-summarystandardbody").hide();