2. Zoom

Zooming in chart, zoom levels and smooth zoom

• For next options in zooming see Gantt paging tutorial.
• The Gantt

  Zoom size

  is defined by two attributes

  GanttUnits

  and

  GanttWidth

  .
  See documentation for Zoom options.
  GanttUnits specifies base display units in chart and GanttWidth specifies width of the one GanttUnits in pixels.
  Remember, GanttUnits are used only for display, size of unit in data is set by GanttDataUnits and is independent on zoom setting.
  
  • GanttUnits for dates are:
    'ms' - milliseconds, 'ms10' - 10 milliseconds, 'ms100' - 100 milliseconds,
    's' - seconds, 's2' - 2 seconds, 's5' - 5 seconds, 's10' - 10 seconds, 's15' - 15 seconds, 's30' - 30 seconds,
    'm' - minutes, 'm2' - 2 minutes, 'm5' - 5 minutes, 'm10' - 10 minutes, 'm15' - quarters of hour, 'm30' - halves of hour,
    'h' - hours, 'h2' - 2 hours, 'h3' - 3 hours, 'h6' - quarters of day, 'h8' - thirds of day, 'h12' - halves of day,
    'd' - days, 'w' - weeks (starting by Sunday), 'w1' - weeks (starting by Monday, in Hirji starts by Saturday),
    'M' - months, 'M3' - quarters of year, 'M6' - halves of year, 'y' - years.
    
  • GanttUnits for numbers are set by any number like '1', '10', '13', '1.3', '0.01' and so on.
  • It is possible also to define custom GanttUnits units by AddGanttUnits API function.
    
• The Gantt

  Data unit size

  is defined by

  GanttDataUnits

  and is independent on zoom setting.
  See documentation for Data units.
  The GanttDataUnits specify the unit size for duration of main bar, lag of dependencies or width of Run boxes.
  The GanttDataUnits are the same values as GanttUnits listed above.
  
  • The units can be extended by

    GanttDataModifiers

    , this attribute defines list of possible suffixes and their multiply values.
    For example GanttDataUnits='h' GanttDataModifiers='h:1,d:8,w:40', so GanttDuration for two weeks can be '2w', '10d', '80h' or '80'.
• Predefined

  Zoom levels

  are set in root Zoom tag by individual Z tags.
  See documentation for Zoom selection.
  Every Z tag has set its Name attribute and the zoom attributes like GanttUnits to preset them.
  When some zoom level is chosen, from Z tag are copied all its attributes (except Name) to the Gantt column.
  So the Z tag can contain attributes affecting zoom, but not attributes affecting data or calculations.
  Usual attributes that Z tag defines are: GanttUnits, GanttWidth, GanttChartRound, GanttHeader and GanttBackground.
  It is possible to define different set of attributes used when set GanttHideExclude='1', by suffix Ex, for example GanttWidth='20' GanttWidthEx='43'.
  

• Initial zoom size and position

  
  Zoom chosen on start is defined by

  GanttZoom

  attribute, assign here the Name of the Z tag.
  To zoom and scroll to some date on start, define

  GanttZoomDate

  attribute, useful especially for high zoom levels, when the whole chart is not visible on start.
  

• Cookies

  
  Actual zoom level and unit width is stored in cookies and restored next time. It can be suppressed by <Cfg> attribute GanttLap='1'.
  It is possible to save also actual scroll position by setting <Cfg> attribute ScrollLeftLap='0'.
  

• Synchronization

  
  The zoom level and position can be synchronized between two or more grids. To have more Gantt charts placed vertically, e.g. to have more vertically scrolled Gantt chart sections.
  Set <Cfg> attribute Sync to all the synchronized grids, use flags Zoom and Horz, optionally also Sec.
  

• GanttSmoothZoom

  ='1' permits increasing GanttWidth of the selected zoom level to show exactly the selected range (by clicking to header date or choosing range in header or by API).
  In this case the GanttWidth defines minimal unit width for the zoom level.
  If set GanttSmoothZoom='0', the GanttWidth is always preserved, so the zoom works roughly, just chooses the nearest zoom level for selected range.
  

• Zoom actions

  
  All the zoom actions can be changed, disabled or attached to different events in Actions tag, by default defined in Defaults.xml.
  • Left click to some header date zooms to the date, to be the one date unit as wide as visible area of the chart.
    It is done by action ZoomHeader attached to OnClickGanttHeader event.
  • Selecting date range in header by mouse dragging zooms to selected range, to be the range as wide as visible area of the chart.
    It is done by action ZoomGantt attached to OnDragGanttHeader event.
  • Right click to header anywhere undoes last zoom action. Or if there is no previous zoom action, zooms out by one level.
    It is done by actions UndoZoom and ZoomOut attached to OnRightClickGanttHeader event.
    
  • Toolbar buttons ZoomIn and ZoomOut zooms in and out by one zoom level. If there is no more zoom level, do nothing.
    It is done by actions ZoomIn and ZoomOut attached to OnClickButtonZoomIn and OnClickButtonZoomOut events.
  • Toolbar button ZoomFit to show the whole chart as wide as possible without showing horizontal scrollbar.
    It is done by action ZoomFitAll attached to event OnClickButtonZoomFit.
  • Zoom levels combo to choose the zoom level from list.
    It can be added to grid by defining Space cell of Type SelectGanttZoom.
  • Zoom to fit particular bar is done by action ZoomBar. It can be run also from right click Gantt menu. This example attaches it to double click to the bar.
    Zoom to fit all Gantt objects in particular Gantt cell is done by action ZoomAll. It can be run also from right click Gantt menu.
    

• Width limitation

  for the zoomed charts.
  Maximal width of the Gantt column in pixels is set by

  MaxWidth

  attribute.
  There is also internal limitation for various browsers, maximal width for IE7 and IE8/9 quirks mode is 178 957 pixels, except if used GanttPaging. Old versions of Opera were limited by 23 000 pixels.
  Maximal width for IE in GanttPaging is 1 193 049 for IE8 strict mode, 1 342 177 for IE8 quirks mode and 1 533 918 for other IE versions. Other browsers are not limited.
  When the width of the column reaches the limit, it shows only part of the chart. The next hidden parts can be accessed only by zooming out and selecting another part to zoom in.
  To display too narrow Gantt wide at least specified width set MinWidth attribute.

• Zoom API

  
  
  • ChangeZoom changes zoom level to given one.
  • ZoomTo zooms to given date range, to show it as wide as possible.
  • ScrollToDate scrolls to given date, even if it is in hidden part of chart due zoom width limitation.
  • OnZoom event is called on every zoom or chart size change.