Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

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 will load here..
{ "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" } ] } ] }
{
    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "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"
            }]
        },
        //Adding connectors to tasks using id's
        "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"
                }
            ]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Configuring Hover Effect for the Connectors

A Gantt chart with hover effects enabled looks like this:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan",
            //Customizing connectors on hover
            "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"
                }
            ]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Top