FusionCharts for Flex > Creating Widgets > Gantt Chart > Task Bar Configurations

In this section, we'll see the various possible configurations which are possible for the task bar. Specifically, we'll be looking at following:

Let's see them one by one.

 
Showing percentage of completion in task bars

You can show percentage of completion on task bars. For example, if you've a task which is only 50% complete, you can easily show the same on the chart by setting:

<task start='04/06/2007' end='07/21/2007' percentComplete='50' />

Here, the percentComplete attribute can take a value between 0-100. When you view this chart, you'll get the following result:

As you can see above, the part that is not complete has been filled by a shade of red. This color can be customized by setting:

<chart slackFillColor='00CCFF'...>

Here, we've changed the slack fill color to a shade of blue, as shown below:

Or, you can opt to show the slack without a fill by setting:

<chart showSlackAsFill='0' ...>

This will result in:

 
Showing the percent complete figures

If you want to show the percent complete figures as part of each task bar, you can set:

<chart showPercentLabel='1' ...>

This will result in:

You can also show the task label and percent figures together, as under:
 
Grouping the task bars

You can visually depict selected tasks as a group by setting the showAsGroup attribute of <task> element to 1.

Consider the following XML:

<chart dateFormat='mm/dd/yyyy' caption='Project Gantt' subCaption='From 1st Feb 2007 - 31st Aug 2007' showSlackAsFill='0' showPercentLabel='1'>
   <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>
   <processes fontSize='12' isBold='1' align='right' headerText='What to do?' headerFontSize='18' headerVAlign='bottom' headerAlign='right'>
      <process label='Research Phase' />
      <process label='Identify Customers' />
      <process label='Survey 50 Customers' />
      <process label='Interpret Requirements' />
      <process label='Study Competition' />
      <process label='Production Phase' />
      <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='04/06/2007' showAsGroup='1' label='Research' showLabel='1'/>
      <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='08/27/2007' showAsGroup='1' label='Production' showLabel='1'/>
      <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>

Here, we've added 2 more processes and 2 more tasks to group other tasks. The final result would be:
 
Using round corners for task bars

If you're NOT using the percentComplete attribute, then you have the option to display task bars with rounded edges.

To use round edges you need to assign the rounding radius:

<chart taskBarRoundRadius='6' ...>

The result will look like this:

 
Customizing the task's tool text
By default, start date and end date of the task will be displayed as tool text (upon mouse hover) if no label has been declared for the task.
 

If you've defined a label for the task, then you'll also see the label in the tool text:

 

If you want to show just the label and not dates in tool tip, you can set:

<chart dateInToolTip='0' ...>

It will result in:

 
Setting custom tool text for each task

You can also set custom tool text for each task using:

<task ... toolText='My own tool text' >

This will result in: