Loading
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:
Given below is a brief description of the attributes used to add connectors between tasks:
| Attribute Name | Description |
|---|---|
|
It is used to specify the ID for the task from which the connector will begin. |
|
It is used to specify the ID for the task at which the connector will end. |
|
It is used to specify whether a connector will connect the starting points of the source and destination tasks. Setting this attribute to |
|
It is used to specify whether a connector will connect the ending points of the source and destination tasks. Setting this attribute to |
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:
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Project Plan"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"process": [
{
"id": "CUSTID_1",
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"id": "1",
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"id": "2",
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"id": "3",
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"id": "4",
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"id": "5",
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"id": "6",
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"id": "7",
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"id": "8",
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"id": "9",
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"id": "10",
"start": "02/24/2015",
"end": "03/27/2015"
}
]
},
"connectors": [
{
"connector": [
{
"fromtaskid": "2",
"totaskid": "3",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "4",
"totaskid": "5",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "5",
"totaskid": "6",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "6",
"totaskid": "7",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "7",
"totaskid": "8",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "8",
"totaskid": "9",
"fromTaskConnectStart": "1",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "9",
"totaskid": "10",
"color": "#008ee4",
"thickness": "2"
}
]
}
]
}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 |
|---|---|
|
It is used to specify whether the hover effect will be shown for the chart. Setting this attribute to |
|
It is used to specify whether the mouse hover effect will be rendered on the connector lines. Setting this attribute to |
|
It is used to specify the hex code for the connector color when the mouse pointer is hovered over it, e.g. #34ABC5. |
|
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. |
|
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:
{
"chart": {
"dateformat": "mm/dd/yyyy",
"caption": "Social Media Optimization",
"subcaption": "Project Plan",
"connectorHoverColor": "#5b0101",
"connectorHoverAlpha": "60",
"connectorHoverThickness": "3"
},
"categories": [
{
"category": [
{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
},
{
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
},
{
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
},
{
"start": "11/01/2014",
"end": "11/30/2014",
"label": "Nov '14"
},
{
"start": "12/01/2014",
"end": "12/31/2014",
"label": "Dec '14"
},
{
"start": "01/01/2015",
"end": "01/31/2015",
"label": "Jan '15"
},
{
"start": "02/01/2015",
"end": "02/28/2015",
"label": "Feb '15"
},
{
"start": "03/01/2015",
"end": "03/31/2015",
"label": "Mar '15"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "right",
"process": [
{
"id": "CUSTID_1",
"label": "Identify Customers"
},
{
"label": "Survey 500 Customers"
},
{
"label": "Interpret Requirements"
},
{
"label": "Market Analysis"
},
{
"label": "Brainstorm concepts"
},
{
"label": "Define Ad Requirements"
},
{
"label": "Design & Develop"
},
{
"label": "Mock test"
},
{
"label": "Documentation"
},
{
"label": "Start Campaign"
}
]
},
"tasks": {
"task": [
{
"id": "1",
"start": "08/04/2014",
"end": "08/10/2014"
},
{
"id": "2",
"start": "08/08/2014",
"end": "08/19/2014"
},
{
"id": "3",
"start": "08/19/2014",
"end": "09/02/2014"
},
{
"id": "4",
"start": "08/24/2014",
"end": "09/02/2014"
},
{
"id": "5",
"start": "09/02/2014",
"end": "09/21/2014"
},
{
"id": "6",
"start": "09/21/2014",
"end": "10/06/2014"
},
{
"id": "7",
"start": "10/06/2014",
"end": "01/21/2015"
},
{
"id": "8",
"start": "01/21/2015",
"end": "02/19/2015"
},
{
"id": "9",
"start": "01/28/2015",
"end": "02/24/2015"
},
{
"id": "10",
"start": "02/24/2015",
"end": "03/27/2015"
}
]
},
"connectors": [
{
"connector": [
{
"fromtaskid": "2",
"totaskid": "3",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "4",
"totaskid": "5",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "5",
"totaskid": "6",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "6",
"totaskid": "7",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "7",
"totaskid": "8",
"color": "#008ee4",
"thickness": "2"
},
{
"fromtaskid": "9",
"totaskid": "10",
"color": "#008ee4",
"thickness": "2"
}
]
}
]
}There! You have now seen how you can add connectors to your tasks in the Gantt chart.