Zoom Extension

You can read details about the Zoom extension in the Zooming article. The current article provides the API reference of the zoom object:

Zoom Levels

The Zoom extension uses a set of the scale settings and allows quickly switching between them.

ZoomLevel is an object that contains the scale settings. It has the following properties:

name - (string) - the name of the level
scale_height? - (number) - the height of the scale
height? - (number) - the height of the scale
min_column_width? - (number) - the minimal width of a column. It has a higher priority than minColumnWidth and maxColumnWidth
scales - (Scales) - an array of scales to switch between while zooming in/out on this level

Methods

init (zoomConfig): void - initializes the extension with the provided configuration.
- zoomConfig - (object) - an object with configuration settings that contains the levels array of zooming levels and a number of additional properties:
  - levels - (ZoomLevel[]) - required, an array of zooming levels
  - handler? - (Function): void - allows specifying a custom handler of the mouse wheel to work with zooming manually
    - e - (Event) - a native event object.
  - startDate? - (Date) - the start value of the time scale zooming
  - endDate? - (Date) - the end value of the time scale zooming
  - activeLevelIndex? - (number) - the number of the default active level
  - widthStep? - (number) - the step of increasing/decreasing the width of scale while switching to the next/previous zooming level
  - minColumnWidth? - (number) - the minimal width of a column that allows switching to the previous zooming level
  - maxColumnWidth? - (number) - the maximal width of a column that allows switching to the next zooming level
  - useKey? - (string) - the key that enables zooming by scrolling the mouse wheel:"ctrlKey" | "altKey" | "shiftKey"
  - trigger? - (string | null | undefined) - the trigger of zooming: "wheel" | null | undefined
  - element? - (HTMLElement | Function): HTMLElement - a DOM element over which zooming is triggered or a function that returns a DOM element

These are two examples of setting the zoom configuration:

var zoomConfig = {
    levels: [
      {
        name:"day",
        scale_height: 27,
        min_column_width:80,
        scales:[
            {unit: "day", step: 1, format: "%d %M"}
        ]
      },
      {
         name:"week",
         scale_height: 50,
         min_column_width:50,
         scales:[
          {unit: "week", step: 1, format: function (date) {
           var dateToStr = gantt.date.date_to_str("%d %M");
           var endDate = gantt.date.add(date, 6, "day");
           var weekNum = gantt.date.date_to_str("%W")(date);
           return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
           }},
           {unit: "day", step: 1, format: "%j %D"}
         ]
       },
       {
         name:"month",
         scale_height: 50,
         min_column_width:120,
         scales:[
            {unit: "month", format: "%F, %Y"},
            {unit: "week", format: "Week #%W"}
         ]
        },
        {
         name:"quarter",
         height: 50,
         min_column_width:90,
         scales:[
          {unit: "month", step: 1, format: "%M"},
          {
           unit: "quarter", step: 1, format: function (date) {
            var dateToStr = gantt.date.date_to_str("%M");
            var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
            return dateToStr(date) + " - " + dateToStr(endDate);
           }
         }
        ]},
        {
          name:"year",
          scale_height: 50,
          min_column_width: 30,
          scales:[
            {unit: "year", step: 1, format: "%Y"}
        ]}
    ]
};
 
gantt.ext.zoom.init(zoomConfig);
 
 
// or, in a more simple way levels can be presented as scale arrays
var hourToStr = gantt.date.date_to_str("%H:%i");
var hourRangeFormat = function(step){
    return function(date){
        var intervalEnd = new Date(gantt.date.add(date, step, "hour") - 1)
        return hourToStr(date) + " - " + hourToStr(intervalEnd);
    };
};
var zoomConfig = {
    levels: [
        [
            { unit: "month", format: "%M %Y", step: 1},
        ],
        [
            { unit: "month", format: "%M %Y", step: 1},
            { unit: "day", format: "%d %M", step: 1}
        ],
        [
            { unit: "day", format: "%d %M", step: 1},
            { unit: "hour", format: hourRangeFormat(12), step: 12}
        ],
        [
            {unit: "day", format: "%d %M",step: 1},
            {unit: "hour",format: hourRangeFormat(6),step: 6}
        ],
        [
            { unit: "day", format: "%d %M", step: 1 },
            { unit: "hour", format: "%H:%i", step: 1}
        ]
    ]
}
 
gantt.ext.zoom.init(zoomConfig);

getCurrentLevel (): number - returns the number (index) of the current zooming level

gantt.ext.zoom.getCurrentLevel();

setLevel (level): void - switches to the specified zooming level.
- level - (number | string) - The level is defined either by a string (the name of the level from the config, e.g. "year"), or by its number in the array of levels

gantt.ext.zoom.setLevel("year");
// or 
gantt.ext.zoom.setLevel(5);

getLevels (): ZoomLevel[] - allows getting all zooming levels

gantt.ext.zoom.getLevels();

Returns an array of zooming levels (ZoomLevels[]) passed to the init() method that initializes the extension.

zoomIn (): void - increases the current zooming level

gantt.ext.zoom.zoomIn();

For the same purpose you can also use:

gantt.ext.zoom.setLevel(zoom.getCurrentLevel() - 1)

zoomOut (): void - decreases the current zooming level

gantt.ext.zoom.zoomOut();

For the same purpose you can also use:

gantt.ext.zoom.setLevel(zoom.getCurrentLevel() + 1)

attachEvent (name, handler): string - attaches an event handler
- name - (string) - the name of the event handler
- handler - (Function) - the function that will be called when the event fires
detachEvent (id): void - detaches a handler from an event
- id - (string) - the id of the attached event handler
callEvent (name, params): boolean - calls an inner event
- name - (string) - the event's name, case-insensitive
- params - (Array<any>) - optional, an array of the event-related data
checkEvent (name): boolean - checks whether an event has some handler(s) specified
- name - (string) - the event's name

Returns true, if some handler is specified for the event.

Events

onAfterZoom - fires during switching of the zooming level. The arguments are:
- level - (number | string) - the number of the level
- config - (ZoomLevel) - the config of the level

gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){ 
    document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
});