Gantt Chart > Connectors

FusionWidgets Gantt chart allows you draw connectors between any two tasks on the chart to indicate 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 where the connector joins the start and end task bar individually – at their start or end.

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.

FusionWidgets allows you select whether to connect the start or end of each task bar using fromTaskConnectStart, fromTaskConnectEnd, toTaskConnectStart and toTaskConnectEnd attributes for each <connector> element. For example, if you wanted to connect the ends of both bars, you could set:

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