Connecting Tasks on Chart

You can draw connectors between any two tasks on the chart to show the process flow.

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

  • Add connectors

  • Configure the hover effect for connectors

Adding Connectors

To draw a connector you need to specify the IDs of the tasks that you want to connect and where the connector joins the start and end task bar individually - at the start or at the end.

For our "Social Media Optimization" Gantt chart, we can connect tasks in the following ways:

  • Requirement interpretation can be done only after the customer survey is over.

  • Concept brainstorming can begin only after market analysis.

  • Testing/QA and documentation can begin at the same time.

A Gantt chart rendered with connectors between the above tasks looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to add connectors between tasks:

Attribute Name Description
fromTaskID It is used to specify the ID for the task from which the connector will begin.
toTaskID It is used to specify the ID for the task at which the connector will end.
fromTaskConnectStart It is used to specify whether a connector will connect the starting points of the source and destination tasks. Setting this attribute to 1 will draw connectors from the starting points.
toTaskConnectStart It is used to specify whether a connector will connect the ending points of the source and destination tasks. Setting this attribute to 1 will draw connectors from the ending points.

These attributes belong to the connector object, which in turn belongs to the connectors object.

The data structure needed to add a connector is given below:

...

Configuring Hover Effect for the Connectors

A Gantt chart with hover effects enabled looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the hover effects:

Attribute Name Description
showHoverEffect It is used to specify whether the hover effect will be shown for the chart. Setting this attribute to 1 enables the hover effect, setting it to 0 (default) disables it.
showConnectorHoverEffect It is used to specify whether the mouse hover effect will be rendered on the connector lines. Setting this attribute to 1 will enable the hover effects, setting it 0 (default) will disable them.
connectorHoverColor It is used to specify the hex code for the connector color when the mouse pointer is hovered over it, e.g. #34ABC5.
connectorHoverAlpha It is used to specify the transparency of the connector when the mouse pointer is hovered over it. This attribute takes values between 0 and 100, e.g. 60.
connectorHoverThickness It is used to specify the thickness, in pixels, of the connector when the mouse pointer is hovered over it, e.g. 5.

These attributes belong to the chart object.

The data structure needed to configure hover effects for the Gantt chart is given below:

...

There! You have now seen how you can add connectors to your tasks in the Gantt chart.