(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Gantt Chart
Overview
- The Dynamic Gantt Chart component provides a visual timeline of tasks, events, or activities.
- It is designed for project management, scheduling, and resource allocation visualization.
- Users can see how activities are distributed over time and across resources.
- The chart highlights task durations, start and end dates, and dependencies.
[IMAGE PLACEHOLDER: Gantt chart showing tasks distributed over time and resources]
Specs
Tokens
| Token | Description |
|---|---|
| displayName | Display name of the component shown in the structure panel |
| titleTranslation | Title text above the Gantt chart with multi-language support |
| globalEventColor | Default color used for events |
| globalEventIconName | Default icon displayed with events |
| resourceColumnCaptionTranslation | Header text for the resource column with translations |
| resourceColumnFieldExpression | Data field for displaying resource names |
| resourceColumnAutoWidth | Adjusts resource column width automatically |
| resourceColumnWidth | Fixed width in pixels for resource column |
| eventNameExpression | Data field for event names |
| eventResourceIdExpression | Data field for linking events to resources |
| eventStartDateExpression | Data field for event start date |
| eventEndDateExpression | Data field for event end date |
| currentTimeLineEnabled | Displays a line for current time in the chart |
| currentTimeLineUpdateIntervalInMs | Interval in milliseconds to update current time line |
| relativeTimeViewEnabled | Enables relative time frames for chart view |
| relateTimeView | Defines which relative time frame to use |
| dynamicTimeView | Enables automatic updates of the time view |
| paddingClass | Configures spacing around the chart with CSS classes |
| useMockData | Enables sample mock data for development |
| getResourcesDataSourceId | Data source ID for fetching resource data |
| getResourcesSourceHttpRequestParametersMap | HTTP request parameters for resource data |
| getEventsDataSourceId | Data source ID for fetching event data |
| getEventsDataSourceHttpRequestParametersMap | HTTP request parameters for event data |
| events | Configurable component events |
| ON_GLOBAL_PARAMETERS_CHANGE | Event triggered when global parameters change |
| ON_INIT | Event triggered when the component is initialized |
| ON_DIALOG_DATA_SUBMIT | Event triggered when dialog data is submitted |
| ON_DESTROY | Event triggered when the component is removed |
| id | Unique identifier for the component |
| dataTestId | Testing hook ID for automated testing |
| enableAsHotspot | Enables component as a guided tour hotspot |
| guidedTourHotSpotTitle | Title for guided tour hotspot (supports translations) |
| guidedTourHotSpotDescription | Description for guided tour hotspot (supports translations) |
Structure
[IMAGE PLACEHOLDER: Overall Gantt chart structure with resources, events, and timeline alignment]
Data Allocation
(Configured in Visual Properties)
- resourceColumnFieldExpression – Specifies which data field to use for displaying resource names. For example,
"fullName"would display the full name of each resource. - eventNameExpression – Defines which data field to use for event names. For example,
"taskName"would display the task name for each event in the chart. - eventResourceIdExpression – Specifies which data field contains the resource ID for each event. For example,
"assignedToId"would link events to resources based on this field. - eventStartDateExpression – Determines which data field contains the start date for each event. For example,
"plannedStartDate"would use the planned start date for positioning events. - eventEndDateExpression – Specifies which data field contains the end date for each event. For example,
"plannedEndDate"would define when each event is scheduled to complete.
[IMAGE PLACEHOLDER: Gantt chart showing allocation of events to resources with start and end dates]
