Highlighting Overrun Tasks In SharePoint Gantt Chart

Though the Gantt Chart that comes out of the box with Sharepoint is useful and easy to setup it has many limitations. One of the features that Sharepoint users were longing for is applying the color code to different tasks. last week Christophe of Path to Sharepoint came up with an interesting way of applying color code using custom images and Jquery script.

The technique used by Christophe can be used to apply different colors to tasks based on their priority.  I have applied the same color changing technique and devised a method for highlighting tasks that have overrun their due date.

Sharepoint adds two custom properties originalTaskFinishDate and originalTaskStartDate to each of the rows in Gantt chart. With this date values, we can determine if a task has overrun its due date. We can then highlight the overrun tasks by changing the image from blue to red using Jquery.

 

Below is the Jquery code that highlights the overrun tasks

<script src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”type=”text/javascript”></script>
<script>
var currentdate = new Date();
$(“.ms-ganttTaskRow”).each(function(i){
//Get the task due date
var d = new Date(this.attributes(“originalTaskFinishDate”).value);
//if due date has value
if(d.getYear() !=1)
{
var datediff = Math.round((currentdate – d) / (24 * 60 * 60 * 1000));
//if due date is greater than current date
if (datediff > 0 ){
var source=this.innerHTML;
//check if the task is completed
var match = /(Normal.gif)|(MileStone.gif)/.test(source)
if(match)
{
$(this).find(“img”).each(function()
{
var source1=this.src;
//replace blue with red
source1 = source1.replace(/.gif/, “Red.gif”);
//change the path of image to where the red images are stored
source1 = source1.replace(/\/_layouts\/images/,”/Projects/GImages”);
this.src=source1;
});
}
}
}
});
</script>

In order to add this highlighting to Gantt charts in your Sharepoint pages, you need to do the following steps

 

 

  1. Change the path of the images(/projects/GImages in a script) to the path where you have placed the red images. The images can be downloaded from here.