Skip to main content
Gantt Chart

Utilization of Gantt charts in project management, elucidating their benefits and implementation for efficient task scheduling and tracking.

Updated over 5 months ago

With the Gantt chart control, you can visualize a schedule of related activities over time—like tasks, projects, or events—on a Gantt chart. You can use it for project management, production timelines, or resource management.


What is a Gantt chart?

A Gantt chart is a type of horizontal bar chart that uses bars to visualize a schedule of certain activities (tasks, projects, events, resource expenditures, etc.) over time. The length and position of each bar shows the start date, end date, and duration of each activity, and the bars are stacked into rows in such a way that you can easily see at a glance which activities overlap and for how long.

In many cases, a project plan or schedule will require that activities be performed in a certain order (for example, a particular contract needs to be signed before construction can begin). A Gantt chart will let you visualize how different activities depend on each other with arrows (called dependencies) connecting the different bars.

The Gantt chart will be created, after which you can configure your data to display on the form or dashboard.


Add a Gantt Chart

Firstly, find the control in the controls adding panel. Then, find the Gantt control in the controls adding panel. Then, drag and drop it into a section or container on your page.


Configuring your data

The first group of settings you can configure are data settings, which includes the data table you want to use for displaying records, and the start and end date fields needed to use the Gantt view. We'll try to automatically fill in these settings for you during the configuration, but you may want to adjust them yourself to make sure they reflect the data you want to use.

Data Source

Select the data list which the data table will show up.

Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.

Afterward, move on to the List section. Select the data list under the selected application.

In the Data Filters section, click the condition button to filter the data from the selected data list.

Set the Primary Order and Secondary Order to sort your data properly.

Set content of the Gantt chart

Move on to the Content section. The Task Name option allows you to choose which field to use as the task name for each record. The Start date field and End date field are used to define the duration for each record when it's displayed on the Gantt chart.

Note

Both of these fields are required to use the Gantt chart; however, you can display records with only an end date by using our milestones feature.

In some cases, a project plan or schedule will require that activities be performed in a certain order. For example, you need to finish making a presentation deck before you give a presentation. You can visualize these dependent relationships between different tasks with arrows (called dependencies) connecting the different bars in the Gantt chart.

In order to create this relationship, you need a lookup field in the selected data list with multiple values. The lookup field must links to its own data list rather than to another data list. You can set the Dependency Field to this lookup field to keep track of dependent relationships between tasks.

The % Complete option allows you to choose a field which will be used to save the percentage of the task progress.

You can create the hierarchy by specifying Parent Field for each task. The parent field need to be a lookup field with single value. The lookup field must links to its own data list rather than to another data list.

Activate the Branch Ordering will allow vertically reordering tasks within the same tree level.


Settings of the Gantt Chart

Height: Set the height of this Gantt Chart.

Default Scale: Set the default scale's unit from Day, Week, Month, Quarter, and Year.

Readonly: Turn is ON if disable the add/edit records for end users.

Highlight critical path: When tasks are dependent on each other, delays to individual tasks can end up directly affecting the completion date of an entire project. A chain of dependent tasks that can influence the finishing date of the overall project is called the critical path. The Gantt view will highlight the critical path based on the earliest and latest records from your dependencies

Auto Scheduling: the auto scheduling option will allow to schedule tasks automatically depending on relations between these records.

Use Milestone: Milestones are represented in the Gantt chart as diamonds with vertical lines. Like tasks, they can have dependencies and record coloring.

Show top toolbar: Turn this ON if you want to display the toolbar on the top of this Gantt Chart. there are couple operation buttons on the toolbar, like zoom in/ zoom out etc.

Task name on timeline: Set the name on time Right, Inner or Left.


Style of the Gantt Chart

Data table: Set the layout and appearance of data table part of Gantt chart.

Background Color: Set background color of the data table.

Border Type: Select the type of border to use around the data table.

Table header:

  1. Padding: Set the Padding of the table header in PX , %, em, rem, vw, calc.

  2. Alignment: Align the table header to the left, center, right in relation to its column.

  3. Typography: Change the default typography options for the table header's text.

  4. Text color: Select the color of the table header’s text.

  5. Background Color: Select the table header’s background color.

  6. Border Type: Select the type of border to use around the table header.

  7. Width – Set the border type's width.

Table content:

  1. Padding: Set the Padding of the table content in PX , %, em, rem, vw, calc.

  2. Border Type: Select the type of border to use around the table content.

  3. Alignment: Align the table content to the left, center, right in relation to its column.

  4. Typography: Change the default typography options for the table content's text.

  5. Normal / Hover/Selected:Set different styles for normal state, hover and selected state of the textbox. Styles below are supported to be set separately for Normal, Hover and Selected state.

    • Row Color: Select the color of the row.

    • Row Background Color: Select the row's background color.

Timeline: Set the layout and appearance of Timeline part of Gantt chart.

  1. Background Color: Select the timeline’s background color.

  2. Border Type: Select the type of border to use around the timeline.

Timeline header:

  1. Padding: Set the Padding of the timeline header in PX , %, em, rem, vw, calc.

  2. Alignment: Align the timeline header to the left, center, right in relation to its column.

  3. Typography: Change the default typography options for the timeline header's text.

  4. Text color: Select the color of the timeline header’s text.

  5. Background Color: Select the timeline header’s background color.

  6. Border Type: Select the type of border to use around the timeline header.

Time content:

  1. Border Type: Select the type of border to use around the timeline content.

  2. Line color: Select the color of the border line.

Task line:

  1. Padding: Set the Padding of the task line in PX , %, em, rem, vw, calc.

  2. Task name typography: Change the default typography options for the task line's text.

  3. Task name color: Select the color of the task name's text.

  4. Percent typography: Change the default typography options for the Percent's text.

  5. Percent color: Select the color of the Percent.

  6. Background Color: Select the task line’s background color.

  7. Border Type: Select the type of border to use around the task line content.

  8. Radius: Set a Border Radius.

  9. Shadow – Set the Shadow of task line part.

Parent task line:

  1. Padding: Set the Padding of the parent task line in PX , %, em, rem, vw, calc.

  2. Task name typography: Change the default typography options for the parent task line's text.

  3. Task name color: Select the color of the parent task name's text.

  4. Percent typography: Change the default typography options for the Percent's text.

  5. Percent color: Select the color of the Percent.

  6. Background Color: Select the parent task line’s background color.

  7. Border Type: Select the type of border to use around the parent task line content.

  8. Radius: Set a Border Radius.

  9. Shadow – Set the Shadow of parent task line part.

Top toolbar: Set the layout and appearance of top toolbar of Gantt chart.

  1. Background Color: Select the top toolbar’s background color.

  2. Border Type: Select the type of border to use around the top toolbar content.

  3. Radius: Set a Border Radius.

Button:

  1. Padding: Set the Padding of the button in PX , %, em, rem, vw, calc.

  2. Typography: Change the default typography options for the button's text.

  3. Normal / Hover/Selected:Set different styles for normal state, hover and selected state of the textbox. Styles below are supported to be set separately for Normal, Hover and Selected state.

    • Text color: Select the color of the button's text.

    • Background Color: Select the button’s background color.

    • Border Type: Select the type of border to use around the button.

    • Radius: Set a Border Radius.

    • Shadow – Set the Shadow of button part.


Advanced Settings

Set the Advanced options that are applicable to this control.


How to use Gantt Chart

Once you completed the configuration, you can publish the form or dashboard. If Ready only is OFF, and the current user has the editing permission on the associated data list. the user can add new tasks by click the "+" button:

This will open the new item window of the associated data list. If you click the "+" button on the header, the new task will be created as the root task display in level 1. If you click the "+" button on a record, the new task will be created as the child task of this record.

To view the detail information of this task, double click the row of that record, or the bar of the Gantt chart. This will open the detail page of the associated data list. You can click the "Edit" or "Delete" button on the detail page to edit the task or delete this task if you have the proper permissions.

To Change the start and end date of each time, you can drag the start point or the end point on the bar of the progress bar, while to create the dependency of tasks, you can move the mouse to the end of the one task's bar, click the cycle and hold your mouse to move to the beginning of the next task. These two tasks will be connected with arrow.

The arrow reflects the direction of the dependency. The base of the arrow comes out of the record that needs to be completed first (the predecessor) and points toward the record that can only be started after the predecessor is completed (the successor).


Did this answer your question?