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'> |
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: |
![]() |