Using the Gantt Chart

The Gantt Chart widget displays Events, sorted by categories and subcategories, represented by bars on a X-axis time scale, which position and size reflect their start date, duration and end date.

Entities can be visually grouped by field using the option Color by in the widget toolbar, which also displays buttons for zooming options. In addition to these, users can scroll the mouse to zoom in and out on the chart and hold a left-click on it to move it around.

The Gantt Chart tooltip is also configurable and allows displaying various information.

Gantt Chart Widget

The widget settings can be edited using a dedicated configurator.

Gantt Chart Widget Configurator

The upper tabs allow configuring the:

  • Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.

  • Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.

  • Toolbar, beneath the widget header, by adding configurable action buttons. For more details, please refer to Section Using the Action API.

  • Custom Controller in charge of customizing the widget behavior, set to None by default.

  • Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, please refer to Section Using the Filter Widget.

The main tabs allow configuring the:

  • Gantt properties, such as the:

    • Show empty groups / rows option,

    • Display show-all button in header option,

    • Display status bar at the bottom of the chart option,

    • Header display mode option, which can be set to:

      • Time and date.

      • Day and month.

      • Weekday and week.

      • Day, week, and month.

      • Week and year.

      • Month and year.

      • Automatic. This last option sets one of the closest time formats stated above depending on the chart time span, respectively, less than 4 days, 15 days, 60 days, 120 days, 210 days or more.

    • Render grid lines option,

    • Preferred row height option,

    • Row alternating colors, if need be.

  • Data source properties, such as the:

    • Series data options:

      • Event type, i.e. the entity to display.

      • Event label, i.e. the name to display.

      • Group by, i.e. the entity used to group the events to display.

      • Start time field, i.e. the entity attribute for the event start time.

      • End time field, i.e. the entity attribute for the event end time.

    • Series data option Event color by, to select an entity used to group the events. If no field is selected, label field will be used. If more than one field is selected, a selector will be added to the widget header;

    • Tooltip fields option Event color by, to select the entity attributes that should be displayed in the tooltip in addition to the default label, start, and end.