Configuring Task Bars

There are various ways in which you can customize the way your task bars render on the chart.

In this section, you will be shown how you can:

  • Create task bars indicating percentage of task completed

  • Customize hover effects for task bars

  • Create task bars that look like a task group

  • Draw task bars with rounded corners

  • Customize the tool text for each task

Creating Task Bars to Indicate Percent Complete Figures

You can have task bars on your chart that tell you what percentage of a task has been completed.

A Gantt chart rendered with task bars indicating percent complete figures looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to render percent complete task bars:

Attribute Name Description
percentComplete It is used to specify what percentage of a task has been completed. This attribute takes values between 0 and 100. It belongs to the task object, which in turn belongs to the tasks object. The portion of the task that is yet to be completed is called the slack.
slackFillColor It is used to specify the hex code of the color that will be used to render the slack, e.g. #432ACD. By default, the slack is rendered in a shade of red. This attribute belongs to the chart object.
showSlackAsFill It is used to specify if the slack will be rendered as a filled bar or as an empty bar. Setting this attribute to 0 will render the slack as an empty bar, setting it to 1 (default) will render it as a filled bar. This attribute belongs to the chart object.

The data structure needed to create task bars indicating percent complete figures is given below:

...

Customizing the Hover Effect for Tasks

By default, hover effects are enabled for Gantt charts. You can further customize the hover effect for the color and transparency.

A Gantt chart with the hover effect for the tasks customized looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to customize the hover effect for tasks:

Attribute Name Description
taskHoverFillColor It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute belongs to the chart object and is applicable to all tasks created in the JSON data.
taskHoverFillAlpha It is used to specify the transparency of the task bar fill color when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. It belongs to the chart object and is applicable to all tasks created in the JSON data.
hoverFillColor It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute, when used with the tasks object, is applicable to all the tasks created under the object. When used with the task object, it is applicable to only one task created using this object.
hoverFillAlpha It is used to specify the transparency the task bar fill color when the mouse pointer is hovered over it. It takes values between 0 (transparent) and 100 (opaque), e.g. 40. This attribute, when used with the tasks object, is applicable to all the tasks created under the object. When used with the task object, it is applicable to only one task created using this object.
showHoverEffect It is used to specify whether the hover effect will be enabled or disabled for all the elements on the chart. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it.
showTaskHoverEffect It is used to specify whether the hover effect will be enabled or disabled for all the tasks on the chart. Setting this attribute to 0 will disable the hover effect, setting it to 1 (default) will enable it.

The data structure needed to customize the hover effect for the tasks is given below:

...

Customizing Hover Effect for Slacks

A Gantt chart with the hover effect customized for slacks looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to customize the hover effect for slacks:

Attribute Name Description
slackHoverFillColor It is used to specify the hex code of the task bar fill color when the mouse pointer is hovered over it, e.g. #444444. This attribute can be used with the chart, tasks, and task objects.
slackHoverFillAlpha It is used to specify the transparency the task bar fill color when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40. It can be used with the chart, tasks, and task objects.

The data structure needed to customize hover effects for slacks is given below:

...

Creating Task Bars that Look like Task Groups

A Gantt chart with task bars presented as task groups looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to represent a task as a parent group visually:

Attribute Name Description
showAsGroup It is used to specify whether the task bars should be rendered as a task group. Setting this attribute to 1 will render the task bars as task groups, setting it to 0 (default) will not.

The data structure needed to create task bars that appear as task groups is given below:

...

Drawing Task Bars with Rounded Corners

A Gantt chart having task bars with rounded corners looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to render task bars with rounded corners:

Attribute Name Description
taskBarRoundRadius It is used to specify the radius for the rounded corners of task bars.

The data structure needed to render task bars with rounded corners is given below:

...

Customizing Tool Text for Task Bars

FusionCharts Suite XT v3.4 allows you to add custom tool text for the task bars in a Gantt chart using attributes and macros.

A Gantt chart rendered with a custom tool text (using attributes and macros) for task bars is given below:

FusionCharts should load here..

Given below is a brief description of the attributes used to render a custom tool text:

Attribute Name Description
dateInToolTip It is used to specify whether the date should be rendered as a part of the tool-tip text. Setting this attribute to 1 will render the date in the tool-tip text, setting it to 0 will not render the date.
plotToolText If you want to have custom tool text for each task bar, you can specify it here.

Macros in Tool-tip Variables

Starting FusionCharts Suite XT v3.4, we can add macros to configure dynamic and contextual content in tooltip. This saves a lot of manual effort and provides for a lot of customization options.

Given below is a brief description of the attribute used to support Gantt chart-specific macros:

Attribute Name Description
milestoneToolText It is used to set to specify the tool-text for milestones.

Given below is a brief description of the Gantt chart-specific macros:

Macro Name Description
$start It is used to specify the start time of a task.
$end It is used to specify the end time of a task.
$processName It is used to specify the corresponding process name of a task.
$label It is used to specify the label of a task.
$percentComplete It is used to specify the percentage of task completed (if provided).
$date It is used to specify the milestone date.
$taskStartDate It is used to specify the start date of the task that corresponds to the milestone.
$taskEndDate It is used to specify the end date of the task that corresponds to the milestone.
$taskLabel It is used to specify the label of the task that corresponds to the milestone.
$taskPercentComplete It is used to specify the percentage completion (if provided) of the task that corresponds to the milestone.
$processName It is used to specify the name of the process that corresponds to the milestone.

The data structure needed to render a Gantt chart with custom tool text for the task bars is given below:

...

There! You have now seen the various ways in which you can configure your task bars.