FusionCharts for Flex > Creating Widgets > Gantt Chart > Connectors

You can draw connectors between any two tasks that are displayed on a Gantt chart, this provides a visual depiction of a process flow. Here, we'll see how to create the same.

 
How to create?

To draw a connector, all you need to do is specify the Id of the two tasks that you want to connect. Apart from this, you can also specify the point at which the connectors join the task bars (i.e. start or end point of the task bar).

To show the connectors, we'll revert to our example of "Gantt Project Schedule" chart and connect a few tasks in the following ways:

  • Interpret requirements can begin only when Custom Survey is over
  • Documentation of features can begin only after Study completion
  • Testing/QA & Documentation can begin at the same time

Shown below is the final output:

The XML for the same can be listed as under:

<chart dateFormat='mm/dd/yyyy' caption='Project Gantt' subCaption='From 1st Feb 2007 - 31st Aug 2007'>
   <categories>
      <category start='02/01/2007' end='04/01/2007' label='Q1' />
      <category start='04/01/2007' end='07/01/2007' label='Q2' />
      <category start='07/01/2007' end='09/01/2007' label='Q3' />
   </categories>
   <categories>
      <category start='02/01/2007' end='03/01/2007' label='Feb' />
      <category start='03/01/2007' end='04/01/2007' label='Mar' />
      <category start='04/01/2007' end='05/01/2007' label='Apr' />
      <category start='05/01/2007' end='06/01/2007' label='May' />
      <category start='06/01/2007' end='07/01/2007' label='Jun' />
      <category start='07/01/2007' end='08/01/2007' label='Jul' />
      <category start='08/01/2007' end='09/01/2007' label='Aug' />
   </categories>
   <processes fontSize='12' isBold='1' align='right'>
      <process label='Identify Customers' />
      <process label='Survey 50 Customers' />
      <process label='Interpret Requirements' />
      <process label='Study Competition' />
      <process label='Documentation of features' />
      <process label='Brainstorm concepts' />
      <process label='Design & Code' />
      <process label='Testing / QA' />
      <process label='Documentation of product' />
      <process label='Global Release' />
   </processes>
   <tasks>
      <task start='02/04/2007' end='02/10/2007' id='TSKIDC' />
      <task start='02/08/2007' end='02/20/2007' id='TSKSRC' />
      <task start='02/19/2007' end='03/02/2007' id='TSKINR' />
      <task start='02/24/2007' end='03/03/2007' id='TSKSTC' />
      <task start='03/02/2007' end='03/21/2007' id='TSKDOC' />
      <task start='03/21/2007' end='04/06/2007' id='TSKBRS' />
      <task start='04/06/2007' end='07/21/2007' id='TSKDSC' />
      <task start='07/21/2007' end='08/19/2007' id='TSKTQA' />
      <task start='07/28/2007' end='08/24/2007' id='TSKDCP' />
      <task start='08/23/2007' end='08/27/2007' id='TSKREL' />
   </tasks>
   <connectors>
      <connector fromTaskId='TSKSRC' toTaskId='TSKINR' thickness='2'/>
      <connector fromTaskId='TSKSTC' toTaskId='TSKDOC' thickness='2'/>
      <connector fromTaskId='TSKTQA' toTaskId='TSKDCP' fromTaskConnectStart='1' thickness='2'/>
      <connector fromTaskId='TSKDCP' toTaskId='TSKREL' thickness='2'/>
   </connectors>
</chart>

Here, we've:

  • First defined our visual timeline and processes.
  • Defined our tasks and allotted a task ID to each task.
  • Defined <connectors> element to contain all the connectors for the chart.
  • Defined each connector using <connector> element. For this element, we've specified:
    • From Task ID - representing which task to start connecting from
    • To Task ID - representing which task to connect to
    • Cosmetics - You can define color, thickness, alpha, isDashed etc.
    • fromTaskConnectStart - Whether to connect from the starting position of the from task bar.

You can specify the points at which the connector joins the task bars (i.e. start or end point). The attributes for specifying the joining points are fromTaskConnectStart, fromTaskConnectEnd, toTaskConnectStart and toTaskConnectEnd, these are specified within the <connector> element. For example, if you wanted to connect the ends of both bars, you need to set:

<connector ... fromTaskConnectEnd='1' toTaskConnectEnd='1' ..>