Gantt Chart Component

I had a need for a Gantt chart to show stages of a project, but my choices out there were limited. I either needed to pay for a solution that I had little control over, or settle for some Javascript implementations that were half-hearted at best. In the end I decided to take a stab at writing my own ColdFusion Component. My first release is a good working solution, but there are still some features that I’d like to implement to make it more powerful.

I made a significant effort to have the chart data drawn almost exclusively by Javascript, otherwise the document size quickly grows out of control. Take a look at the source for the sample chart to see how small the actual document is compare to how much HTML is generated.

You can see the sample chart shown below in action before going into the code.

The code has two components: the chart itself and individual rows.

GanttChart Component Properties

<cfproperty name="width" type="numeric" default="0" />
<cfproperty name="startDate" type="date" />
<cfproperty name="endDate" type="date" />
<cfproperty name="rows" type="numeric" default="0" />
<cfproperty name="scale" hint="Daily | Monthly | Yearly" type="string" />
<cfproperty name="title" type="string" />
<cfproperty name="rowLabel" type="string" />
<cfproperty name="scrollToDate" type="date" />  

You can create the basic chart in one of two ways. This example shows setting the individual properties.

<cfscript>
jbossChart = createobject("component", "com.orbwave.charts.gantt.GanttChart").constructor();
jbossChart.setStartDate('8/12/06');
jbossChart.setEndDate('12/30/08');
jbossChart.setTitle('JBoss Deployment');
jbossChart.setWidth(640);
jbossChart.setScale('monthly');
</cfscript>

You can also pass many of the parameters into the constructor

<cfscript>
jbossChart = createobject("component", "com.orbwave.charts.gantt.GanttChart").constructor('JBoss Deployment',640,'8/12/06','12/30/08');
jbossChart.setScale('daily');
</cfscript>

GanttChartRow Component Properties

<cfproperty name="label" type="string" />
<cfproperty name="style" type="string" />
<cfproperty name="ranges" type="array" />

The ranges property I added in so that each row of data could show several sub-stages with different colors. Each range its own start and end date and a row must have at least one range.

GanttChartRow Range Properties

• StartDate [string, required]
• EndDate [string, required]
• Style [string, solid (default) | striped]

Here’s the code for the rows in the sample chart

<cfscript>
row1 = createobject("component", "com.orbwave.charts.gantt.GanttChartRow").constructor('Setup web server');
row1.addRange('08/15/06','11/15/06','olive');
jbossChart.addRow(row1);

row2 = createobject("component", "com.orbwave.charts.gantt.GanttChartRow").constructor('Connect PHP','striped');
row2.addRange('11/22/06','03/25/07','indianred');
row2.addRange('03/26/07','05/01/07','black');
row2.addRange('05/02/07','09/01/07','goldenrod');
jbossChart.addRow(row2);

row3 = createobject("component", "com.orbwave.charts.gantt.GanttChartRow").constructor('Connect .NET');
row3.addRange('03/13/07','06/01/07','darkslategray');
jbossChart.addRow(row3);

row4 = createobject("component", "com.orbwave.charts.gantt.GanttChartRow").constructor('Complete URL Rewrites','striped');
row4.addRange('06/05/07','10/30/07','blue');
jbossChart.addRow(row4);
</cfscript>

Once you set all the properties for the chart and each row, you just call the draw() method.

<cfset jbossChart.draw() />

Things left to do for the next version:

• Allow multiple blocks of tasks
• Validation of row ranges to prevent overlaps
• Scroll-to dates to take user to a specific date in the chart
• General validation of dates to prevent end dates earlier than start dates

Download Gantt Chart source code