FusionCharts for Flex > Creating Widgets > Gantt Chart > Creating your first chart

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:

  1. Decide on the data you want to plot.
  2. Convert the data into XML either manually or using scripts (and database)
  3. Embed the Gantt chart in an HTML page and pass the reference to the above created XML file

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):

Process Name Start Date End Date
Project Gantt 02/01/2007 08/31/2007
Identify Customers 02/04/2007 02/10/2007
Survey 50 Customers 02/08/2007 02/19/2007
Interpret Requirements 02/19/2007 03/02/2007
Study Competition 02/24/2007 03/02/2007
Documentation of features 03/02/2007 03/21/2007
Brainstorm concepts 03/21/2007 04/06/2007
Design & Code 04/06/2007 07/21/2007
Testing / QA 07/21/2007 08/19/2007
Documentation of product 07/28/2007 08/24/2007
Global Release 08/24/2007 08/27/2007

As you can see (above), we've:

  • Distributed the entire project into processes (sub-tasks)
  • Specified a start date and end date for each process.

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:

  1. Specify the dateFormat and other important attributes inr the <chart> element
  2. Add the <categories> element - the items listed under the <categories> element become a part of the chart’s timeline. It possible to divide each interval of a timeline into smaller units, by declaring sub categories within the <categories> element. For this chart however we’ll configure a simple timeline.
  3. Add processes under the <processes> element.
  4. Add tasks to processes and specify a start and and end date for each task.
  5. Make some cosmetic changes.

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:

  • mm/dd/yyyy
  • dd/mm/yyyy
  • yyyy/mm/dd

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:

  • caption='Project Gantt'
  • subCaption='From 1st Feb 2007 - 31st Aug 2007'
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:

  • The start and end of each <category> should be same - as all the categories represent the same duration, just using different units.
  • The sub-category of each category should be so defined that they cover the entire duration and the dates of two sub-category never overlap.
  • The dates of sub-category represent a date within the date frame of the chart. For example, in our Quarter division, we've set the dates for Q1 as 02/01/2007-04/01/2007, as the date frame of chart is 02/01/2007-08/31/2007. If we set Q1 as 01/01/2007-04/01/2007, the chart will change the date frame to 01/01/2007-08/31/2007.
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:

  • The date defined for each task should conform to the dateFormat specified earlier.
  • The end date for a task should always be more than the start date.
  • The date for any task should be within the date frame of the chart (i.e., the date frame defined by chart categories).

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 Chart

We 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 Design view in your MXML application. Here you'll find a custom component named FusionWidgets in the Components window. Next, follow the steps listed below.

  1. Drag the FusionWidgets custom component and drop it onto the stage. You will find that a control with FusionWidgets logo has been created on the stage.

  2. Next, switch to the Flex Properties window, select the Category View option and then choose the FusionCharts group.

  3. Select Gantt as the value of FCChartType from the drop-down list.

  4. Select Data.xml as the value of FCDataURL from the drop-down list. FCDataURL property sets the path of the XML file.

The equivalent code in Source view should be:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:ns1="com.fusionwidgets.components.*"
>
...
  <ns1:FusionWidgets x="10" y="10" FCDataURL="Data.xml" FCChartType="Gantt" width="600" height="400"/> ...
</mx:Application>

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.