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::
|
||||||||||||||
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: |
||||||||||||||
|
||||||||||||||
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: |
||||||||||||||
![]() |