Skip to content

Gantt Chart

A Gantt chart provides a graphical illustration of a schedule that helps to plan, coordinate and track specific tasks.

1. Define a Gantt Chart

2. Add The Gantt Chart To The Container

3. Set The Appropriate Properties For The Gantt Chart

4. Add Data Grid To The Gantt Chart

5. Add The Gantt Items To Display In The Gantt Chart

6. Creating a Hierarchical Structure

7. Adding Schedule Information

8. Adding Information And Actions Using Cards

9. Styling Gantt Items

10. Displaying Connections

11. Enabling CRUD Actions

12. Custom Commands

13. Filtering Values

14. Legend

15. Adding Time Markers

16. Subscribe To Other Gantts / Charts

17. Timescale Configurations

18. Color By

19. Collapsing Non-Working Time

20. Multi Select

21. Snap Time Configuration

22. Expand The Top-level Node By Default

23. Highlight Gantt Items

24. Multiple Time Lines

25. Overlapping Components

26. Time Range

27. Zoom Level

28. Gantt Row Grouping

29. Gantt Display Time Zone

List - List View

Figure 1 - Gantt Chart Control

When To Use

Use the Gantt chart control when you want to display information that needs to be planned, coordinated and progress tracked.

Limitations

  • The control can only be used inside a page, it can not be used within an assistant.

How To Use

Follow the steps below to add a Gantt chart to a page:

1. Define a Gantt Chart

Define a Gantt chart in the client model file using the following format:

ganttchart <gantt_chart_name> for <entity_name> {  
   ...  
}  

<gantt_chart_name> - Identity of the Gantt chart, always use a meaningful identifier.

<entity_name> - The entity the Gantt chart is based on, see example below:

-------- Example code ----------  
ganttchart ProjectGantt for Project {  
   ...  
}  

2. Add The Gantt Chart To The Container

Add the Gantt chart to a page. A Gantt chart gets its values from a data source which is either an entity set, or an array. This populates the tree like structure for the Gantt chart. Items for each row are fetched using dependent arrays:

  1. Add the Gantt chart with its own entity set for example, to the page:
page <page_name> {  
    ganttchart <gantt_chart_name> using <entityset_for_gantt_chart>;  
}  
 `<entityset_for_gantt_chart>` - This is the [entityset](../../110_projection_controls/entityset/) that serves as the data source from which the Gantt chart gets its values to populate the tree like structure. The [entityset](../../110_projection_controls/entityset/) must be based on the same [entity](../../110_projection_controls/entity/) that was used to define the Gantt chart.

-------- Example code Method 1 ----------  
ganttchart ProjectGantt using ProjectRows {  
...  
}  
2. Add the Gantt chart to use the entity set of the page:
page <page_name> using <entityset_for_page> {  
    ganttchart <gantt_chart_name>;  
}  
 This method is useful if the purpose of the [page](../../100_pages_and_structure/100_page_types/030_page/) is to display the Gantt chart. In such instances it is not mandatory to define an [entityset](../../110_projection_controls/entityset/) for the Gantt chart since it gets its values from the `<entityset_for_page>`.
------ Example code Method 2 ------  
page GanttPage using Projects {  
ganttchart ProjectGantt;  
}  

3. Set The Appropriate Properties For The Gantt Chart

Set one or more properties for the Gantt chart such as label, data grid, and Gantt chart item. For a complete list of the properties and how to set them see the Properties section below.

4. Add Data Grid To The Gantt Chart

The data grid is the tree like structure on the left of the chart. It can be a flat structure or a hierarchical structure depending on how the Gantt chart is defined.

Each row in the grid is termed as a "Gantt Row". Each "Gantt row" has corresponding Gantt items.

Gantt Chart - Data Grid

Figure 2 - Gantt Chart Control - Data Grid

-- Example code - Adding datagrid to Gantt chart --  
ganttchart ProjectGantt for Project {  
label = "Project Gantt";  
    datagrid {  
        ganttcolumn ProjectId {  
            label = "Project Id";  
    }  
        ganttcolumn Name {  
            label = "Name";  
        }  
    }  
}  

Focus First Item of the Row:

Action: When a user clicks on the label of a tree cell within the data grid, the Gantt functionality will automatically initiate scrolling to bring the first item on that row into view.

Issue: With lazy loading of items, this functionality can be no longer supported.

Solution: New Marble syntax (scrolltodate) is introduced for the application developers to set an attribute which contains a date. When user clicks on the label, Gantt will now scroll into the date provided in the attribute.

Advantage: With this approach application developers have more flexibility over this functionality which sets the scroll location of each row and they are not restricted to default one provided by the control.

Additional Configurations: Application developers can set the alignment of items by specifying the value in the Marble syntax, indicated as (alignment) below

Values: start , center

start: Items will be located closer to the data grid with an offset to left margin from center of the Gantt

center: items will be located in the middle of the Gantt

Note: This functionality was previously set by the itemfocus property; however, it has now been deprecated and transitioned into the new Marble syntax.

ganttchart <Gantt_Chart_Name> for <ENTITY> {
  ...
  datagrid {
      oncellclick {
         scrolltodate <ATTRIBUTE_NAME> {
            alignment = Start | Center;
         }        
      }
      ...
   }
}

5. Add The Gantt Items To Display In The Gantt Chart

Gantt items are the elements in the Gantt chart that are scheduled, planned and tracked.

Gantt Chart - Gantt Items

Figure 3 - Gantt Chart - Gantt Items

  1. Defining the Gantt Item
ganttchartitem <gantt_chart_item_name> for <entity_name> {  
    starttime <start_time_attribute>;  
    endtime <end_time_attribute>;  
}  
 `<gantt_chart_item_name>` - Identity of the gantt chart item, always use a meaningful identifier.
 `<entity_name>` - The [entity](../../110_projection_controls/entity/) the gantt chart item is based on.
 `<start_time_attribute>` - Attribute on the [entity](../../110_projection_controls/entity/) that is used to fetch the start time of the item.
 `<end_time_attribute>` - Attribute on the [entity](../../110_projection_controls/entity/) that is used to fetch the end time of the item.

---- Example code - Defining a Gantt Chart Item ----  
ganttchartitem ProjectItem for Project {  
starttime PlanStart;  
endtime PlanFinish;  
}  
2. Add the Gantt item to the chart
ganttchartitem <gantt_chart_item_name>(<gantt_item_array>);  
 `<gantt_chart_item_name>` - Identity of the gantt chart item.
 `<gantt_item_array>` - This is the array used to populate the gantt items with respect to the gantt row.
------ Example code - Defining a Gantt Chart Item ------  
ganttchart ProjectGantt for Project {  
    label = "Project Gantt";  
    datagrid {  
        ganttcolumn ProjectId {  
            label = "Project Id";  
        }  
        ganttcolumn Name {  
            label = "Name";  
        }  
    }  
    ganttchartitem ProjectItem(ProjectItemArray);  
}  

When fetching Gantt chart data from the server, control will add additional filter conditions to fetch data relevant only to the current view span of the user. This is done by using timeline start and end dates of the current view span as filters to filter out items which are outside of timeline range.

Fetched data will be cached, and if the user scrolls out from the current view span and return back to it, data will be fetched from the cache. If items are populated through functions, application developer can access timeline start and end through view state parameters.

(component..TimelineStart , component..TimelineEnd)

6. Creating a Hierarchical Structure

As mentioned above the Gantt tree structure can be hierarchical. This is achieved by adding Gantt chart rows recursively. Each row must also have corresponding items.

  1. Define a Gantt Row
ganttchartrow <gantt_chart_row_name> for <entity_name> {  
    datagrid {  
        ganttcolumn <attribute_name>;  
        ganttcolumn <attribute_name>;  
        ...  
    }  
    ganttchartitem <gantt_chart_item_name>(<gantt_item_array>);  
    ganttchartrow <gantt_chart_row_name>(<gantt_row_array>);  
    ...  
}  
 `<gantt_chart_row_name>` - Identity of the Gantt chart row, always use a meaningful identifier.
 `<entity_name>` - The [entity](../../110_projection_controls/entity/) the gantt chart row is based on.
 `<attribute_name>` - Attribute on the [entity](../../110_projection_controls/entity/) corresponding to the columns defined in ganttchart definition.
 `<gantt_chart_item_name>` - Identity of the gantt chart item corresponding to this row.
 `<gantt_item_array>` - This is the array used to populate the gantt items corresponding to this row.
 `<gantt_chart_row_name>` - Identity of the gantt chart sub-level row.
 `<gantt_row_array>` - This is the array used to populate the sub-level rows.

------ Example code - Defining a Gantt Chart Item ------  
ganttchartrow SubProjectRow for SubProject {  
    datagrid {  
        ganttcolumn SubProjectId;  
        ganttcolumn Description;  
    }  
    ganttchartitem SubProjectItem(ChildSubProjectItemArray);  
    ganttchartrow SubProjectRow(ChildSubProjectArray);  
    ganttchartrow ActivityRow(ActivityArray);  
}  
2. Adding the Gantt Chart Row
--- Example code - Adding to Gantt Chart Root level ---  
ganttchart ProjectGantt for SubProject {  
    datagrid {  
        ganttcolumn SubProjectId;  
        ganttcolumn Description;  
    }  
    ganttchartitem ProjectItem(ProjectItemArray);  
    ganttchartrow SubProjectRow(SubProjectArray);  
}  




------ Example code - Adding to a sub-level ------  
ganttchartrow SubProjectRow for SubProject {  
    datagrid {  
        ganttcolumn SubProjectId;  
        ganttcolumn Description;  
    }  
    ganttchartitem SubProjectItem(ChildSubProjectItemArray);  
    ganttchartrow SubProjectRow(ChildSubProjectArray);  
    ganttchartrow ActivityRow(ActivityArray);  
}  
 There can be different types of sub-level rows and they can also be recursive as shown in the above example code.

7. Adding Schedule Information

It is possible to display schedule information (working and non-working time periods). Each row can have a separate schedule. Non working times are grayed out.

Gantt Chart - Gantt Items

Figure 4 - Gantt Chart - Gantt Schedules

  1. Define a schedule
     ganttchartschedule <gantt_chart_schedule_name> for <entity_name> {  
         scheduleid <schedule_id>;  
         schedulestart <schedule_start_time>;  
         scheduleend <schedule_end_time>;  
        ganttchartitemstyle <schedule_style> = [<style_boolean_value>];  
    }  
 `<gantt_chart_schedule_name>` - Identity of the schedule, this needs to be a meaningful identifier.
 `<entity_name>` - The [entity](../../110_projection_controls/entity/) schedule is based on.
 `<schueduleid>` - An attribute in entity which uniquely identifies each schedule.
 `<schedule_start_time>` - Attribute for schedule start.
 `<schuedule_end_time>` - Attribute for schedule end.
 `<gantt_style_item_name>` - Identity of the Gantt chart style item, it is necessary to always use a meaningful identifier.
 `<style_boolean_value>` - Either [true] or a condition that evaluates to a boolean value.

    --- Example code - Defining a Gantt Chart Schedule ----  
    ganttchartschedule WorkingShiftSchedule for WorkTimeCalendar {  
        scheduleid CalendarId;  
        schedulestart FromTime;  
        scheduleend ToTime;  
        ganttchartitemstyle OvertimeStyle = [true];  
    }  
2. Add schedule to gantt chart or row
   scheduleid <schedule_id_for_row>;  
   ganttchartschedule <gantt_chart_schedule_name>(<row_schedule_array>);  
 `<schedule_id_for_row>` - Attribute in entity which defines schedule id for each row.
 `<gantt_chart_schedule_name>` - Identifier for gantt chart schedule.
 `<row_schedule_array>` - An array which provides data to populate schedule information.
   ---- Example code - Adding to Gantt Chart Root level ----  
    ganttchart ProjectGantt for Project {  
        scheduleid ProjectCalendarId;  
        ganttchartschedule WorkingShiftSchedule(WorkingTimeArray);  
    }  
------ Example code - Adding to a sub-level ------  
ganttchartrow SubProjectRow for SubProject {  
    scheduleid ProjectCalendarId;  
    ganttchartschedule WorkingShiftSchedule(SubProjectWorkingTimeArray);  
}  

8. Adding Information And Actions Using Cards

A card can be connected to the Gantt chart row and/or item to display additional information. A standard card is used so other properties such as actions can also be made available to the Gantt chart.

  1. Adding a card to Gantt Row

ganttchartrow SubProjectRow for SubProject {  
    datagrid {  
        ganttcolumn SubProjectId;  
        ganttcolumn Description;  
        card SubProjectCard;  
    }  
    ganttchartitem SubProjectItem(ChildSubProjectItemArray);  
    ganttchartrow SubProjectRow(ChildSubProjectArray);  
    ganttchartrow ActivityRow(ActivityArray);  
}  
2. Adding a card to Gantt Item
ganttchartitem ActivityItem for Activity {  
    starttime EarlyStart;  
    endtime EarlyFinish;  
    card ActivityCard;  
}  

9. Styling Gantt Items

Predefined shapes and emphasis can be used to depict Gantt items in visually different ways. This is useful for example when working with a hierarchical structure and each sub-level needs to be visually distinct from each other.

Gantt Chart - Gantt Item Styles

Figure 5 - Gantt Chart - Gantt Item Styles

  1. Defining a Gantt Item Style
ganttchartitemstyle <gantt_style_item_name> {  
    shape = <predefined_shape>;  
    emphasis = <emphasis_color>;  
    icon = <icon_name>;  
}  
 `<gantt_style_item_name>` - Identity of the Gantt chart style item, always use a meaningful identifier.
 `<predefined_shape>` - One of `default/bracket/diamond/buffer/icon/baseline/highlight/crossbracket/thinbracket`. If shape is icon, then `icon` needs to be specified.
 `<emphasis_color>` - A value from the emphasis emphasis list.
 `<icon_name>` - Icon name from icon library to be used with icon shape type.

------ Example code - Defining Styles ------  
ganttchartitemstyle ProjectGanttStyle {  
    emphasis = Complementary9;  
    shape = bracket;  
}  
ganttchartitemstyle ActivityGanttStyle {  
    emphasis = Primary;  
    shape = default;  
}  
ganttchartitemstyle MilestoneActivityGanttStyle {  
    emphasis = Primary;  
    shape = diamond;  
}  
ganttchartitemstyle TotalFloatGanttStyle {  
    emphasis = State-Cancelled;  
    shape = buffer;  
}  
ganttchartitemstyle ProjectConnectionGanttStyle {  
    emphasis = Complementary7;  
    shape = icon;  
    icon = "document-cart";  
}  
ganttchartitemstyle PlanTravelStyle {
   emphasis = StateHidden;
   shape = travelbar;
}
Following Item types are supported in gantt charts: default, baseline, bracket, buffer, crossbracket, diamond, highlight, icon, travelbar, thinbracket

ganttshapes

Figure 6: Supported Gantt Chart Item Types

  1. Adding a Style to a Gantt Item Multiple styles can be declared for a Gantt item, but only one will be true at a particular time.
ganttchartitem ProjectItem for Project {  
    ...  
    ganttchartitemstyle <gantt_style_item_name> = <style_boolean_value>;  
    ganttchartitemstyle <gantt_style_item_name> = <style_boolean_value>;  
}  
 `<gantt_style_item_name>` - Identity of the gantt chart style item, always use a meaningful identifier.
 `<style_boolean_value>` - Either [true] or a condition that evaluates to a boolean value.
------ Example code - Adding Styles ------  
ganttchartitem ProjectItem for Project {  
    ...  
    ganttchartitemstyle ProjectGanttStyle = [true];  
}  
ganttchartitem ActivityItem for Activity {  
    ...  
    ganttchartitemstyle ActivityGanttStyle = [TotalFloat != 0];  
    ganttchartitemstyle CriticalActivityGanttStyle = [TotalFloat = 0];  
    ganttchartitemstyle MilestoneActivityGanttStyle = [TotalWorkDays = 0];  
}  

10. Displaying Connections

Connections are drawn between items, there are several types of connection, each defines a different behavior for each connection. These connections are used to set rules for scheduling. . User can select one or more connections and perform actions. Tooltip will be displayed when hoovering for additional information.

Gantt Chart - Gantt Connections

Figure 7 - Gantt Chart - Gantt Connections

  1. Defining Gantt Connection
   ganttdependency <gantt-chart-dependency> for <entity> {  
       dependencytype StartToStart = [<gantt-chart-dependency-condition>];  
       dependencytype StartToFinish = [<gantt-chart-dependency-condition>];  
       dependencytype FinishToStart = [<gantt-chart-dependency-condition>];  
       dependencytype FinishToFinish = [<gantt-chart-dependency-condition>];  
       fromitem = "<predecessor-key>";  
       toitem = "<successor-key>";  
         
   tooltip {         
field <attribute>  
   }  

   }  
 `<gantt-chart-dependency>` - Identity of the gantt chart connection, always use a meaningful identifier.
 `<entity>` - The [entity](../../110_projection_controls/entity/) connection is based on.
 `<gantt-chart-dependency-condition>` - Either [true] or condition that evaluates to a boolean value.
 `<predecessor-key>` - An attribute from entity which defines the predecessor of the connections. This should be related to `itemid` given when creating gantt chart items.
 `<successor-key>` - An attribute from entity which defines the successor of the connections. This should be related to `itemid` given when creating gantt chart items
 `<attribute>` Field attribute that needs to be displayed on the tooltip

-- Example code - Defining a Gantt Chart Connection --  

ganttdependency GanttActivityDependency for ActivityDependency {  
    dependencytype StartToStart = [DependencyType = "StartToStart"];  
    dependencytype StartToFinish = [DependencyType = "StartToFinish"];  
    dependencytype FinishToStart = [DependencyType = "FinishToStart"];  
    dependencytype FinishToFinish = [DependencyType = "FinishToFinish"];  
    fromitem = "${PredecessorActivitySeq}";  
    toitem = "${SuccessorActivitySeq}";  
}  
2. Adding connections to row
       ganttdependency <gantt-chart-dependency>(<dependency-array>);  
 `<gantt-chart-dependency>` - Identity of the gantt chart connection.
 ``<dependency-array>` - This is the [array][5] used to populate the gantt connections with respect to the gantt row.
-- Example code - Adding a Gantt Chart Connections --  
ganttchartrow ActivityRow for Activity {  
    ganttdependency GanttActivityDependency(DependencyArray);  
}  

11. Enabling CRUD Actions

CRUD actions on items is performed by invoking custom, CRUD specific, commands. These commands are responsible for performing the appropriate actions required to modify the data according to business logic. In other words: the framework does not assist in persisting the changes, it's all up to the provided commands to invoke actions and database procedures as needed.

The command declarations have much in common with the declaration of ordinary command's except they are declared inline in the item declaration and have dedicated names.

  1. Enabling crud actions on an item
ganttchartitem ActivityItem for Activity {  
    ...  
    <gantt-command-name> command {  
        enabled = <enabled_condition>;  
        execute <execute-block>  
    }  
}  
 `<gantt-command-name>` - Can be one of these 5:  \* `create` - Command invoking actions required to insert a new item record. Will provide data for parent properties used in the row -&gt; item relation (to insert at correct row).  \* `move` - Command invoking actions required to move an item. Will provide data for the new start and end times as well as parent properties used in the row -&gt; item relation (for changing row).  \* `resize` - Command invoking actions to resize an item. This means changing the end time of the item. Will provide data for the new end time.  \* `edit` - Command invoking actions to arbitrary edit properties of the item.  \* `delete` - Command invoking actions to delete an item record.
 All of these can also u