1. Overview  

2. Key features  

• Visualize the project timeline for effective planning and identify the project completion timeframe.

• Customize the Gantt chart by applying themes and colors to the timeline (Gantt bars) based on values for improved comprehension.

• View the project timeline across various intervals like daily, weekly, monthly, and yearly.

• Track your project's progress and manage task dependencies for efficient project execution.  

• Detect and correct incorrect data by reviewing the error logs provided.

3. Types of chart

This extension supports three types of Gantt charts, depending on the form setup.

Type 1: Basic chart with list of tasks

A chart that displays a straightforward list of tasks with start and end dates. Best suited for forms that only need to present task timelines.

Type 2: Multiple projects with list of tasks

A chart that displays task timelines for individual projects and allows switching between projects. Ideal when each project has its own set of tasks that has to be viewed separately.

Type 3: Multiple projects with list of tasks and its subtasks

A chart that displays tasks and their associated subtasks for each project, which allows you to switch projects. Most useful when projects need a detailed breakdown of tasks and subtasks.

4. Installing the extension  

To install the Gantt chart extension, please follow the below steps.

1. Go to Zoho Marketplace.

2. Click Extensions in the top-left corner and select Zoho Creator.

3. Search for the Gantt chart extension and click Install. You need to login to your Zoho account to install the extension. 

Refer to this page to learn more about installing the extension. Once installed, the extension will be available in your Zoho Creator account.

5. Setting up the extension     

Type 1 

Create a new form with the below fields.

2. Embed the extension on a page and add scripts

1. Open page builder and add the Gantt chart extension as a widget.

2. Click the Page Variables and Scripts icon on the top menu bar.
   

3. Click Add Variables and add the below variable.
             Variable Name - data
             Data type         - Text
   
   

4. Click Scripts and add the below scripts. Ensure the parameters are mapped to the correct link names as explained in the table below.
   

input.data =
{
"reportName":"All_Tasks",
"chartSetup":{
"dateFormat": "dd-MM-yyyy",
"fields":
{
"taskName":"Task_name",
"startDate":"Start_date",
"endDate":"End_date"
}
}
};

3. Add records and view the Gantt chart

1. Access the live mode of the application and add records to the Task form.

2. Sort the report by Start date ascending order.

3. Click the page where the extension is embedded. The Gantt chart will be displayed.
   
   

See how to configure

Type 2 

This type is useful for Gantt chart that displays list of tasks associated with a project. This chart allows to switch projects and view its tasks.

1. Create forms

You need to create two forms for this type.

Form 2 - Projects form

Constraints: The link name of start date and project name must be Start_Date and Project_Name in all the instances; only then the Gantt chart will work as expected.

2. Embed the extension on a page and add scripts

1. Open page builder and add the Gantt chart extension as a widget.

2. Click the Page Variables and Scripts icon on the top menu bar.
   
   
   

3. Click Add Variables and add the below variable.
                Variable Name - data
                Data type - Text
   
   

4. Click Scripts and add the below scripts. Ensure the parameters are mapped to the correct link names as explained in the table below.

input.data =
{
"parentReport":"All_Projects",
"reportName":"All_Tasks",
"relationLinkName":"Project_Name",
"chartSetup":
{
"dateFormat":"dd-MMM-yyyy",
"fields":
{
"taskName":"Task_name",
"startDate":"Start_date",
"endDate":"End_date"
}
}
};

3. Add records and view the gantt chart

1. Access the live mode of the application and add records to the Tasks form.

2. Sort the report by Start date ascending order.

3. Click the page where the extension is embedded. The Gantt chart will be displayed. 

See how to configure

Type 3 

1. Create forms

You need to create three forms for this type.

Form 1 - Projects form

Form 2 - Task form

Form 3 - Subtask form

Constraints:

• The link name of start date and project name must be Start_Date and Project_Name in all the instances; only then the Gantt chart will work as expected.

• A subtask's start and end dates must be fall within its parent task's start and end dates.

2. Embed the extension on a page and add scripts

1. Open page builder and add the gantt chart extension as a widget.

2. Click the Page Variables and Scripts icon on the top menu bar.
   

3. Click Add Variables and add the below variable.
                Variable Name - data
                Data type         - Text
   
   

4. Click Scripts and add the below scripts. Ensure the parameters are mapped to the correct link names as explained in the table below.

input.data = 
{
"parentReport":"All_Projects",
"reportName":"All_Tasks",
"relationLinkName":"Project_Name",
"chartSetup":
{
"dateFormat":"dd-MMM-yyyy",
"fields":
{
"taskName":"Task_name",
"startDate":"Start_Date"
,"endDate":"End_date",
"subData":
{
"subReportName":"All_Subtasks",
"subRelationName":"Task_Lookup",
"subFields":
{
"subTaskName":"Subtask_name",
"subStartDate":"Subtask_start_date",
"subEndDate":"Subtask_end_date"
}
,
"expansion":true
}
}
}
};

3. Add records and view the gantt chart

1. Access the live mode of the application and add records to the Tasks form.

2. Sort the report by Start date ascending order.

3. Click the page where the extension is embedded. The Gantt chart will be displayed.

See how to configure

Note: Only existing forms can be used as subforms here. Inline subforms are not supported.

6. Other customizing options

This extension provides customization options to distinguish various tasks with colors and have a more visually appealing chart.

• Set chart theme

• Set Gantt bar colors

• Set color based on field values

6.1  Set chart theme 

You can set any desired color to your chart and make it more attractive. Add the below script to set the chart theme.

Info:  The value can be given in both color codes or specified as color names.

6.2 Set Gantt bar colors  

You can set multiple colors for the timeline to help you distinguish between various tasks. The chart utilizes a round-robin pattern from the multiple colors to determine the timeline (Gantt bars) colors. If you've given four colors - red, blue, green, and yellow - the bars will be colored in the same sequence. For the subsequent bars, the color sequence will repeat in the same order.

6.3  Set color based on field values 

You can set colors for the Gantt bars based on the value of a field. For example, if you want to view the tasks in different colors according to their status (field), you can do so by assigning different colors to different statuses. Like Pending tasks could be displayed in yellow, Ongoing tasks in blue, and Completed tasks in green.

This helps you quickly identify the critical aspects of a project, therefore reducing the time to interpret the information and improving overall clarity. You can add the below script and set colors according to your preference.

• basedOn - denotes the field link name based on which the bars color will be configured.

All the above three customization scripts can to be added at the end of the Gantt chart scripts.

7. Points to note

1. For the Gantt chart to display effectively, you should sort the report by start date in ascending order.
   
2. The 'dateFormat' parameter is supported only in the latest version of the Gantt chart extension. The older version will only support 'dd-MMM-yyyy' date format by default. Learn more about updating the extension.

8. Related Topics

• Install and manage extensions

• Page script and variables