FusionCharts for Flex > Creating Widgets > Gantt Chart > Basic Configuration

In this section, we'll see a some of the basic configuration properties exposed by the Gantt chart.

Please note that the chart actually offers a lot more properties than what's discussed here - you can find a list of all of them in the XML Reference Sheet.

We'll study the following properties here (you can click on the links below to directly scroll to the respective sections):

Let's see each of them in detail.

 
Color Palettes

The Gantt chart offers 5 pre-defined color palettes for you to choose from. Each of these palettes are accessible by the number 1-5. To choose a palette, all you need to do is set:

<chart palette='2' or '3' or ..>

Shown below are a few examples of palettes applied on our previous chart:

<chart palette='2'...>
<chart palette='3'...>
<chart palette='4'...>
<chart palette='5'...>
 

Additionally, you can also define an entire new palette by setting a single theme color using:

<chart paletteThemeColor='669933' ..>

This will create a new palette based on the specified color and the chart will be colored accordingly.

 
Customizing font properties

The Gantt chart offers multiple options for customizing the font properties for the text that appears on various parts of the chart, like:

  • Caption, sub-caption and legend, you can use STYLES to individually customize the font of each of these elements.
  • Categories and category labels, there are special attributes for customizing the font of these elements.
  • For process names, there are attributes for customizing its font properties.
Specifying font properties for processes

You can specify font properties for all processes listed on the chart by setting:

<processes font='Arial' fontColor='0372AB' fontSize='13' isBold='1' isItalic='1' isUnderLine='1' bgColor='FFFFFF' align='center' vAlign='middle' ...>

There are many more attributes for doing this, for more information please refer the XML Reference Sheet.

Additionally, you can also over-ride the collective font settings for all processes by specifying the font property for each process individually, as shown below:

<process font='Arial' fontColor='0372AB' fontSize='13' isBold='1' isItalic='1' ...>

 
Specifying font properties for categories

Similar to processes, you can specify the collective font properties of all sub-categories within a <categories> element by specifying:

<categories font='Arial' fontColor='0372AB' fontSize='13' isBold='1' isItalic='1' isUnderLine='1' bgColor='FFFFFF' align='center' vAlign='middle' ...>

Or, you can specify the font property for each category individually, in the following manner:

<category font='Arial' fontColor='0372AB' fontSize='13' isBold='1' isItalic='1' ...>

 
Defining task labels and showing/hiding them

Apart from the process labels, you can also define task labels for each task and choose to show/hide them on the chart. To define a task label, you'd have to set:

<task start='04/06/2007' end='07/21/2007' label='Design & Code'/>

Here, we've defined the task label for a single task. By default, the task label is not visible on the chart. To make it visible, you need to set:

<chart showTaskLabels='1'..>
or
<tasks showLabels='1'>
or
<task start='04/06/2007' end='07/21/2007' label='Design & Code' showLabel='1'/>

Basically, the above attribute lets you control whether or not to show labels - collectively for all tasks or individually for a single task.

When you now view the chart, the task bars would show up with the label. Also, the text specified in the label will also be displayed tooltip:

 
This is how the label text shows up in the tooltip:
 
Font properties for both task labels and tool tips can either be set using <task> element attributes or using STYLE feature. Refer to the XML Reference Sheet for more information on this.
 
Showing/hiding task dates

Apart from showing the task labels, you can also show the start and end dates of tasks by setting:

<chart showTaskStartDate='1' showTaskEndDate='1' >

 

Or, you can opt to show the start and end date for individual tasks by setting:

<task start='04/06/2007' end='07/21/2007' label='Design & Code' showLabel='1' showStartDate='1' showEndDate='1'/>

This will result in:

Adding process header

You can add header (title) for the processes column in the data table and customize its cosmetics by setting:

<processes fontSize='12' isBold='1' align='right' headerText='What to do?' headerFontSize='18' headerVAlign='bottom' headerAlign='right'>

This will result in:

 
Adding more columns to the data table
Apart from the process labels, the data table can also contain more columns. To do so, you need to add <datatable>, <datacolumn> and <text> elements as under. Each of these elements can have a number of cosmetic attributes which have been defined in XML Reference Sheet.
<chart>
...
   <datatable headerVAlign='bottom'>
      <datacolumn headerText='Who does?' headerFontSize='18' headerVAlign='bottom' headerAlign='right' align='left' fontSize='12' >
         <text label='John' />
         <text label='David' />
         <text label='Mary' />
         <text label='Andrew' />
         <text label='Tiger' />
         <text label='Sharon' />
         <text label='Neil' />
         <text label='Harry' />
         <text label='Chris' />
         <text label='Richard' />
      </datacolumn>
   </datatable>
...
</chart>
With this, you'll get the following result:

You can add any number of columns to this grid.

Since our chart's width is relatively less, a scroll bar will automatically be displayed, the scroll bar allows users to scroll through the data table. You can increase the width of data table by:

  • Either increasing chart width.
  • Or, by setting <chart ganttWidthPercent='0-100' > to a lower value. This attribute sets the percentage width of the gantt pane.

The data grid on the left is both scrollable and resizable i.e., the users can click on the drag handlers (vertical line separating two data columns) and drag them to resize the data column. Additionally, you can also explicitly set the width of each data column using:

<datacolumn width='200' ..> - Sets data column width as 200 pixels
or
<datacolumn width='40%' ..> - Sets data column width as 40% of the entire data grid width

If you wish to hide the scroll bar of the data table, you can set:

<chart showFullDataTable='0' ..>

This will wrap & truncate the data labels and the data will be squeezed into the available space (only if possible).