Here, we’ll create a simple Gantt chart and in the sections that follow, you’ll learn how to configure a Gantt chart minutely. Following are the steps for creating a simple Gantt chart:
Here, we'll focus only on the XML structure of the Gantt chart, as the process of including it in an HTML page has already been discussed in the section Creating your first chart. |
||||||||||||||||||||||||||||||||||||
As a simple example, we'll plot the timeline of a fictitious project let's say "Project Gantt". This project has multiple sub-tasks and these will be plotted on a Gantt chart. Following data will be used for creating chart (all dates in are in mm/dd/yyyy format): |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||
As you can see (above), we've:
Before we delve into creating the XML for above data table, let's look at how the final chart would look: |
||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||
Building the XML | ||||||||||||||||||||||||||||||||||||
To build the XML for above chart, we need to:
Following is the XML for the Gantt chart. We will save this XML in a file called Data.xml. |
||||||||||||||||||||||||||||||||||||
<chart dateFormat='mm/dd/yyyy' caption='Project Gantt' subCaption='From 1st Feb 2007 - 31st Aug 2007'> <categories> <category start='02/01/2007' end='03/01/2007' label='Feb' /> <category start='03/01/2007' end='04/01/2007' label='Mar' /> <category start='04/01/2007' end='05/01/2007' label='Apr' /> <category start='05/01/2007' end='06/01/2007' label='May' /> <category start='06/01/2007' end='07/01/2007' label='Jun' /> <category start='07/01/2007' end='08/01/2007' label='Jul' /> <category start='08/01/2007' end='09/01/2007' label='Aug' /> </categories> <processes fontSize='12' isBold='1' align='right'> <process label='Identify Customers' /> <process label='Survey 50 Customers' /> <process label='Interpret Requirements' /> <process label='Study Competition' /> <process label='Documentation of features' /> <process label='Brainstorm concepts' /> <process label='Design & Code' /> <process label='Testing / QA' /> <process label='Documentation of product' /> <process label='Global Release' /> </processes> <tasks> <task start='02/04/2007' end='02/10/2007' /> <task start='02/08/2007' end='02/19/2007' /> <task start='02/19/2007' end='03/02/2007' /> <task start='02/24/2007' end='03/02/2007' /> <task start='03/02/2007' end='03/21/2007' /> <task start='03/21/2007' end='04/06/2007' /> <task start='04/06/2007' end='07/21/2007' /> <task start='07/21/2007' end='08/19/2007' /> <task start='07/28/2007' end='08/24/2007' /> <task start='08/24/2007' end='08/27/2007' /> </tasks> </chart> |
||||||||||||||||||||||||||||||||||||
Understanding the XML |
||||||||||||||||||||||||||||||||||||
<chart> element and its attributes | ||||||||||||||||||||||||||||||||||||
The <chart> element is the root element of the Gantt chart. . This element can accept a many attributes, which decide both the functional and cosmetic properties of the chart. For more information on this view the XML Reference Sheet. |
||||||||||||||||||||||||||||||||||||
Specifying input date format for the chart | ||||||||||||||||||||||||||||||||||||
The dateFormat attribute allows you to set the input data format (i.e. the format in which dates will be entered in the XML). This attribute is declared in the <chart> element. It is necessary to specify a date format using the dateFormat attrbute, otherwise the dates entered in the XML will not be identifed by the chart. Following are the accepted values for the dateFormat attribute:
To keep things simple, we're not discussing time format here, this has been covered in the Time based charts section. |
||||||||||||||||||||||||||||||||||||
Specifying caption and sub-caption for the chart | ||||||||||||||||||||||||||||||||||||
Caption and sub-caption is specified in the <chart> element using following attributes:
|
||||||||||||||||||||||||||||||||||||
Defining the visual timeline for the chart | ||||||||||||||||||||||||||||||||||||
The chart's timeline can be configured using the <categories> element. Folloiwng XML code has been used for declaring the timeline: |
||||||||||||||||||||||||||||||||||||
<categories> <category start='02/01/2007' end='03/01/2007' label='Feb' /> <category start='03/01/2007' end='04/01/2007' label='Mar' /> <category start='04/01/2007' end='05/01/2007' label='Apr' /> <category start='05/01/2007' end='06/01/2007' label='May' /> <category start='06/01/2007' end='07/01/2007' label='Jun' /> <category start='07/01/2007' end='08/01/2007' label='Jul' /> <category start='08/01/2007' end='09/01/2007' label='Aug' /> </categories> |
||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||
Adding more categories | ||||||||||||||||||||||||||||||||||||
If you want to add another category on the date scale, say a scale showing quarters, you would need to add another <categories> element as shown below: | ||||||||||||||||||||||||||||||||||||
<chart ... > ... <categories> <category start='02/01/2007' end='04/01/2007' label='Q1' /> <category start='04/01/2007' end='07/01/2007' label='Q2' /> <category start='07/01/2007' end='09/01/2007' label='Q3' /> </categories> <categories> <category start='02/01/2007' end='03/01/2007' label='Feb' /> <category start='03/01/2007' end='04/01/2007' label='Mar' /> <category start='04/01/2007' end='05/01/2007' label='Apr' /> <category start='05/01/2007' end='06/01/2007' label='May' /> <category start='06/01/2007' end='07/01/2007' label='Jun' /> <category start='07/01/2007' end='08/01/2007' label='Jul' /> <category start='08/01/2007' end='09/01/2007' label='Aug' /> </categories> ... </chart> |
||||||||||||||||||||||||||||||||||||
This will give the following result: | ||||||||||||||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||||||||||||
Similarly, you can add weeks, days, hours, minutes etc. as sub-categories. The idea is to add as many categories as you need with each sub-category containing the start and end date. You'll just need to keep the following considerations in mind:
|
||||||||||||||||||||||||||||||||||||
Defining processes for the chart | ||||||||||||||||||||||||||||||||||||
The processes are defined using the <processes> element. This element can contain many visual and functional attributes, for detailed information on these attributes, please refer the XML Reference Sheet. In the code (below), some attrbutes have been defined within the <processes> element in order to bring about some cosmetic changes. Each <process> element within the <processes> element represent a unique process on the chart. |
||||||||||||||||||||||||||||||||||||
<processes fontSize='12' isBold='1' align='right'> <process label='Identify Customers' /> <process label='Survey 50 Customers' /> <process label='Interpret Requirements' /> <process label='Study Competition' /> <process label='Documentation of features' /> <process label='Brainstorm concepts' /> <process label='Design & Code' /> <process label='Testing / QA' /> <process label='Documentation of product' /> <process label='Global Release' /> </processes> |
||||||||||||||||||||||||||||||||||||
Defining the tasks | ||||||||||||||||||||||||||||||||||||
The <tasks> and <task> elements are used for defining the tasks which will be represented on the chart as horizontal bars. Both <task>and <tasks> elements can contain attrbutes, that effect the functional and cosmetic properties of the tasks. For more information on these attributes refer the XMLReference Sheet. | ||||||||||||||||||||||||||||||||||||
<tasks> <task start='02/04/2007' end='02/10/2007' /> <task start='02/08/2007' end='02/19/2007' /> <task start='02/19/2007' end='03/02/2007' /> <task start='02/24/2007' end='03/02/2007' /> <task start='03/02/2007' end='03/21/2007' /> <task start='03/21/2007' end='04/06/2007' /> <task start='04/06/2007' end='07/21/2007' /> <task start='07/21/2007' end='08/19/2007' /> <task start='07/28/2007' end='08/24/2007' /> <task start='08/24/2007' end='08/27/2007' /> </tasks> |
||||||||||||||||||||||||||||||||||||
When specifying the dates for tasks, you need to make sure that:
Now that our first chart is done, we'll look into a some of the basic chart configuration properties in the next section. |
||||||||||||||||||||||||||||||||||||
Building the ChartWe will assume that you already have a project open and an MXML application, where you are ready to insert your chart. Begin by switching to the
The equivalent code in <?xml version="1.0" encoding="utf-8"?> The file Data.xml is our previously created XML file. The file should be present in the same location as your MXML file. If not, you should specify the path of the file in the FCDataURL property. If you do not wish to create a separate XML data file, you can also bind the data as a string to the FCDataXML property. |