FusionCharts for Flex > Creating Widgets > Gantt Chart > Creating Milestones

Milestones are an important part of a Gantt chart as they allow you to visually depict crucial stages of a taskt. You can add a milestone to any point of a task, i.e. for a given task you can specify milestones for a specific date, and you can customize the appearance of a milestone in terms of shape (star or polygon), size and color.

Additionally, you can add a tool text to milestone and also convert it into a hyperlink. Here, we'll see how to do the same.

 
Basics

You can create a milestones for one or more tasks. As such, to create a milestone, you need to have the following information:

  • The task ID to which this milestone relates to. You'll need to define all the tasks on your chart with a task ID.
  • Date of milestone

Let's quickly see an example where we add a milestone to one of our previous charts - "Gantt Project Schedule". We'll show two milestones - one to represent Development complete and another one to show Successful global release. The end result will look like this:

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/19/2007' id='TSKSRC' />
      <task start='02/19/2007' end='03/02/2007' id='TSKINR' />
      <task start='02/24/2007' end='03/02/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/24/2007' end='08/27/2007' id='TSKREL' />
   </tasks>
   <milestones>
      <milestone date='8/19/2007' taskId='TSKTQA' shape='star' toolText='Development Complete' color='FF5904'/>
      <milestone date='8/28/2007' taskId='TSKREL' shape='star' toolText='Successful Global Release' color='FF5904'/>
   </milestones>
</chart>

As you can see above, we've:

  • Specified a task ID for each task. It is using this ID that milestones are related to tasks.
  • Created the <milestones> element which will contain all the milestones that are to be displayed on the chart.
  • Created a <milestone> element which contains attributes that define the milestone's position and appearance. Following attributes are defined in the <milestone> element:
    • TaskId refers to the ID of task to which the milestone gets attached to
    • date refers to the date of the milestone (the point at which the milestone will appear on the task)
    • shape can be star or polygon. You've more customizable properties for the milestone, which have been listed in XML Sheet.
    • We've also defined our custom tool text for each milestone, which the user gets to see if he moves his mouse over the milestone.
    • We've defined our own color for each milestone.
  • You can also link each milestone by setting <milestone link='link in FusionCharts format' ..>

The tool tips show up on mouse hover: