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:
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:
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.