FusionCharts for Flex > Creating Widgets > Gantt Chart > Scrolling Options

In Gantt charts scrolling is supported for the data table and the gantt view pane. Here, we'll see how to enable and configure the scroll bar.

 
Configuring the scroll bar for the data table
A scroll bar will automatically appear in the data table if it contains more data than what can be accomodated in the available space. For example, consider the XML below:
<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>
 <datatable headerVAlign='bottom'>
      <datacolumn headerText='Who does?' headerFontSize='18' headerVAlign='bottom' headerAlign='right' align='left' fontSize='12' >
         <text label='John' />
         <text label='David' />
         <text label='Mary' />
         <text label='Andrew' />
         <text label='Tiger' />
         <text label='Sharon' />
         <text label='Neil' />
         <text label='Harry' />
         <text label='Chris' />
         <text label='Richard' />
      </datacolumn>
   </datatable>
   <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>
</chart>
The above XML results in a chart as below:

As you can see above, the scroll bar in the data-grid automatically becomes active when the data contained in it cannot fit in one screen.

The scroll bar that appears in the data-grid, can be disabled in following 3 ways::

  • Increase the chart width, this increases the size of the data-grid, thereby allowing all the data to be displayed in one screen.
  • Set <chart ganttWidthPercent='0-100' > to a lower value. This attribute indicates the percentage of the total chart width that is allotted to the gantt pane. If the gantt takes lesser space, the grid will automatically get more space - allowing all the data to fit on one screen.
  • Set <chart showFullDataTable='0' ..>, this causes the data displayed in the data-grid to be wrapped & truncate. Essentially, this attribute tries to squeez all the data into the available space (as much as possible).
Configuring the scroll bar for the Gantt pane

In case of the Gantt pane, the scroll bar never appears automatically if the data does not fit into the available space. To enable the scroll bar for the Gantt pane, you'll first need to decide on the following - "What time frame should be visible in one screen of the Gantt pane?". Once this is decided and specified for the chart, the rest of time frame is shown upon scrolling. For example, you may decide that instead of showing all data at once, you just want to see 3 month's worth of data in 1 screen. As such, you'll need to specify:

<chart ganttPaneDuration='3' ganttPaneDurationUnit='m' ..>

This tells the chart to set the gantt pane duration as 3 months. And, the chart now looks as under:

As you can see above, the chart now shows data for only 3 months - the rest can be viewed upon scrolling.

ganttPaneDurationUnit can take the following values:

Value What it represents?
y How many years to display?
m How many months to display?
d How many days to display?
h How many hours to display?
mn How many minutes to display?
s How many seconds to display?
If the duration specified by you is more than the actual time span of the chart, no scroll bar is displayed for the Gantt pane.
 
Configuring scroll properties

It is possible to customize the cosmetics of the scroll bar.

To change the color of the scroll bar, you can use:

<chart scrollColor='99CCCC' ..>

 

You can also increase its height, padding, button width etc using:

<chart scrollColor='99CCCC' scrollPadding='3' scrollHeight='20' scrollBtnWidth='28' scrollBtnPadding='3' ...>

This gives a result as under: