FusionCharts for Flex > Creating Widgets > Gantt Chart > Trend lines & Zones

You can add Trend lines and trend zones to a Gantt chart. These are helpful when you want to highlight a certain date or a duration - like say, you want to draw a line for "Today" or color a duration of time to indicate vacations. Here, we'll see how to create the same.

 
Creating a trend line
For a simple example, we'll create a trend line showing today in our "Gantt Project" example. The final result will look like this:
The XML for the chart looks 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' />
      <task start='02/08/2007' end='02/19/2007' />
      <task start='02/19/2007' end='03/02/2007' />
      <task start='02/24/2007' end='03/02/2007' />
      <task start='03/02/2007' end='03/21/2007' />
      <task start='03/21/2007' end='04/06/2007' />
      <task start='04/06/2007' end='07/21/2007' />
      <task start='07/21/2007' end='08/19/2007' />
      <task start='07/28/2007' end='08/24/2007' />
      <task start='08/24/2007' end='08/27/2007' />
   </tasks>
   <trendlines>
      <line start='08/14/2007' displayValue='Today' color='333333' thickness='2' dashed='1' />
   </trendlines>
</chart>

As you can see above, we've added a trend line under the <trendlines> element. All trend lines must be defined within this element.

Each trend line on the chart is represented by a <line> element which can have a number of attributes. Here, we've used:

  • start to indicate the start date of trend line. If you're using trend zones (explained below), then you'll need to specify the end attribute too. Also, end attribute can be used if you want a slanted trend line.
  • displayValue to specify the label for the trend line.
  • Various cosmetic properties, which have been discussed in detail in the Chart XML Sheet
Creating trend zones
If you need to highlight a block of dates, you can use trend zones to do so. Shown below is an example, where we highlight a full week as "Vacation"
The XML for the chart looks 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' />
      <task start='02/08/2007' end='02/19/2007' />
      <task start='02/19/2007' end='03/02/2007' />
      <task start='02/24/2007' end='03/02/2007' />
      <task start='03/02/2007' end='03/21/2007' />
      <task start='03/21/2007' end='04/06/2007' />
      <task start='04/06/2007' end='07/21/2007' />
      <task start='07/21/2007' end='08/19/2007' />
      <task start='07/28/2007' end='08/24/2007' />
      <task start='08/24/2007' end='08/27/2007' />
   </tasks>
   <trendlines>
      <line start='05/3/2007' end='05/10/2007' displayValue='Vacation' isTrendZone='1' alpha='20' color='FF5904'/>
   </trendlines>
</chart>
To defined a trend zone, we've to set both start and end date for the line and also set isTrendZone='1'.