Gantt Charts

A Gantt chart is a horizontal bar chart developed as a production control tool in 1917 by Henry L. Gantt, an American engineer and social scientist. Frequently used in project management, a Gantt chart provides a graphical illustration of a schedule that helps to plan, coordinate, and track specific tasks in a project.

A Gantt chart allows to track either whole projects or tasks that has to be accomplished to achieve project goals within multiple projects.

Data Model

Gantt chart uses its own data model that has the following XML representation: 

<xml [pattern="<date/time pattern>"] [locale="<langcode>-<countrycode>"]>
    <item name="<name>" type="<type>" from="<from>" to="<to>"/>
    ....
</xml>
where

date/time pattern - is a standard Java Date/Time pattern
langcode - is a standard ISO two character language code
countrycode - is a standard ISO two character country code
name - is a task name
type - is a project name

For example, the following XML model 

<xml pattern="M/d/yy hh:m a" locale="en-US">
   <item name="Task A" type="My Project" from="1/16/05 11:04 PM" to="1/18/05 1:44 AM"/>
   <item name="Task B" type="My Project" from="1/17/05 6:44 AM" to="1/18/05 8:44 PM"/>
   <item name="Task C" type="My Project" from="1/17/05 11:44 AM" to="1/18/05 7:44 AM"/>
   <item name="Task D" type="My Project" from="1/16/05 1:44 PM" to="1/18/05 1:44 PM"/>
</xml>

will produce the chart that will look like:

Xml Style:
  <gantt>
     <xAxis>
        <dateTimeStyle minorUnit="Hour"/>
     </xAxis>
  </gantt>

 

Creating single-project Gantt Chart

Creating a basic single-project Gantt chart is fairly simple. You will need to make sure that your X-axis (date/time axis) style is set up correctly to display your data range. WebCharts3D provides two sets of attributes to do so - major that define what is rendered as a label and minor that define what is the least significant part of the date. Usually you will need to set major attributes in such a way that only a reasonable number of labels is displayed.

For the model presented in Data Model section you might want to set your major attributes in such a way that the chart displays only days or half days along X axis. To do so, click on XAxisstyle in the Properties panel and look under DateTimeStyle. When major unit is set to Day you will see the picture shown in the previous section. Let us set major unit to Hour and major step to12 to display two periods per day.

You should see the following picture (we set multiline mode for Xaxis to avoid label overlapping):

Xml Style:
  <gantt>
     <xAxis isMultiline="true">
        <dateTimeStyle majorUnit="Hour" 
			majorStep="12" 
			minorUnit="Hour"/>
     </xAxis>
  </gantt>

 

Creating multi-project Gantt Chart

A mutli-project Gantt chart contains elements with more than one type in its data model. Change the model described in Data Model section by changing the type for tasks A and B to 'Another Project' and then changing the B task's name to A so that it looks like: 

<xml pattern="M/d/yy hh:m a" locale="en-US">
   <item name="Task A" type="My Project" from="1/16/05 11:04 PM" to="1/18/05 1:44 AM"/>
   <item name="Task A" type="Another Project" from="1/17/05 6:44 AM" to="1/18/05 8:44 PM"/>
   <item name="Task C" type="Another Project" from="1/17/05 11:44 AM" to="1/18/05 7:44 AM"/>
   <item name="Task D" type="My Project" from="1/16/05 1:44 PM" to="1/18/05 1:44 PM"/>
</xml>

This model defines two projects - MyProject containing tasks A and D, and AnotherProject containing tasks A and C. You chart should now look like

Xml Style:
  <gantt>
     <xAxis isMultiline="true">
        <dateTimeStyle majorUnit="Hour"
                        majorStep="12"
                        minorUnit="Hour"/>
     </xAxis>
  </gantt>

Multi-project Gantt charts can be displayed in two modes:

  • Clustered - when each project task is allocated its own space inside each task bucket and
  • Overlapped - when all project tasks are displayed overlapped inside each task bucket.

Usually when using overlapped mode you should either ensure that the project tasks for the same task do not overlap or use transparent colors. To change the Gantt type to overlapped click on type combobox and select Overlapped. The chart will look like:

Xml Style:
  <gantt type="Overlapped">
     <xAxis isMultiline="true">
        <dateTimeStyle majorUnit="Hour"
                        majorStep="12"
                        minorUnit="Hour"/>
     </xAxis>
  </gantt>

 

Customizing charts

Gannt charts can be easily customized to give them a unique look. In this section we will start with a basic chart that uses the following model: 

<xml pattern="M/d/yy hh:m a" locale="en-US">
   <item name="Task A" type="ProjectA" from="1/17/05 9:00 AM" to="1/29/05 9:44 AM"/>
   <item name="Task A" type="ProjectB" from="2/16/05 9:20 AM" to="3/17/05 9:00 AM"/>
   <item name="Task B" type="ProjectB" from="1/10/05 11:00 AM" to="2/18/05 9:45 AM"/>
   <item name="Task B" type="ProjectA" from="2/27/05 9:25 AM" to="3/21/05 9:25 AM"/>
</xml>

With major unit for Y axis set to Month the chart with the above data looks like:

Xml Style:
  <gantt>
     <xAxis>
        <dateTimeStyle majorUnit="Month"/>
     </xAxis>
  </gantt>

 

Customizing X Axis labels and groups

First, let's change the labeling to be Weekly by changing major step in DateTymeStyle for X axis from Month to Week. We will also define a new label format for the labels. Click on Label Format, change style to DateTimePattern and enter 'EEE dd' as the format. This will tell the engine to show three character day of week abbreviation along with the day of month. Close the dialog. You chart should look like

Xml Style:
  <gantt>
     <xAxis>
        <labelFormat style="DateTimePattern" pattern="EEE dd"/>
        <dateTimeStyle majorUnit="Week"/>
     </xAxis>
  </gantt>

This looks better but now there is no way to see the month. You can add month to the format but this would duplicate month name in every label. A better way is to define grouping for the elements. In XAxis format click on GroupFormat and change its style from None to DateTimePattern. Enter MMMM (or MMM for three character month abbreviation) into the Pattern field and close the dialog. You chart should change to:

Xml Style:
  <gantt>
     <xAxis isMultiline="true">
        <groupFormat style="DateTimePattern" pattern="MMMMM"/>
        <labelFormat style="DateTimePattern" pattern="EEE dd"/>
        <dateTimeStyle majorUnit="Week"/>
     </xAxis>
  </gantt>

Customizing X Axis range

If you want to ensure that a particular range is always shown, you need to define X Axis scale max and/or scale min. In our model we do not have data for the last week of March. In order to include this week into the chart you can set scale max attribute of X axis to '3/31/05 0:00 AM'. Note that the date should be in the format defined by the model. The chart will change to:
Xml Style:
  <gantt>
     <xAxis scaleMax="3/31/05 0:00 AM" isMultiline="true">
        <groupFormat style="DateTimePattern" pattern="MMMMM"/>
        <labelFormat style="DateTimePattern" pattern="EEE dd"/>
        <dateTimeStyle majorUnit="Week"/>
     </xAxis>
  </gantt>

Scale max and scale min attributes are used to expand the chart's range defined by the chart's model. What if you need to show only a subset of the Gantt chart - your projects might go for over a year, but you need to show only a few months? To tell the chart to ignore the input data range and to use range defined by scale min and scale max values turn useModelRange flag off. Now, if we enter '1/25/05 0:00 AM' as scale min our picture will change to:

Xml Style:
  <gantt>
     <xAxis scaleMax="3/31/05 0:00 AM" scaleMin="1/25/05 0:00 AM" 
	    useModelRange="false" isMultiline="true">
        <groupFormat style="DateTimePattern" pattern="MMMMM"/>
        <labelFormat style="DateTimePattern" pattern="EEE dd"/>
        <dateTimeStyle majorUnit="Week"/>
     </xAxis>
  </gantt>

Note that now both Testing in Task A and Development in Task B have arrows pointing back to denote that these tasks started earlier than it is shown.

When you want to show a Task that does not have a yet defined end date you can use empty string as a date in your XML data model. In this case an arrow pointing forward will be displayed at the end of the task bar regardless of the X axis range.

Customizing Y Axis

Y axis in Gannt chart can be placed on the Left, Right or Both edges of the chart. Similarly to X axis, you can make Y axis multi-line.

Xml Style:
  <gantt>
     <xAxis scaleMax="3/31/05 0:00 AM" scaleMin="1/25/05 0:00 AM"
            useModelRange="false" isMultiline="true">
        <groupFormat style="DateTimePattern" pattern="MMMMM"/>
        <labelFormat style="DateTimePattern" pattern="EEE dd"/>
        <dateTimeStyle majorUnit="Week"/>
     </xAxis>
     <yAxis isMultiline="true" showOn="Both"/>
  </gantt>

 

Using Pseudo-variables

Gantt charts treat pseudo-variables used by annotations and data labels in a different way than other charts do. The following table summarizes the psedo-variables and their formats supported by Gantt charts:

${colLabel} - Project/type
${rowLabel} - Task/name
${prevValue[;format]} - From date/time
${nextValue[;format]} - To date/time
${value[;format]} - From - To string

The following chart demonstrates usage of the Gantt pseudo-variables:

Xml Style:
  <gantt>
	<dataLabels style="Pattern"><!CDATA[
$(rowLabel)
From: $(prevValue;mm/dd/yy hh:mm)
To: $(nextValue;hh:mm:ss)
$(value;EEE hh:mm)
        ]]>
	<dataLabels>
	.....
  </gantt>

 
   Copyright © 1994-2010 GreenPoint, Inc. All rights reserved.