Gantt Chart

Yeeflow team
Yeeflow team
  • Updated

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 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.

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 pathThe 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.

Theme: We provide several themes which you can select to change the styles and colors.



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).


Was this article helpful?




Please sign in to leave a comment.