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. Step 1: 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.

4. Step 2: Set up the Extension  

To visualize the tasks on a timeline, you can install this extension from the Zoho Marketplace and embed a Gantt chart directly into your application, providing a clear and comprehensive overview of your project's timeline. You can add the Gantt chart extension to any page of your application in just two steps.

1. Embed the widget in a new or existing page by following these steps.

2. Add the below page variable in the page. 
   
   

   Parameter	Data Type
   data	TEXT

   
   

3. Add the below page script to that respective page. It maps the field link name to generate a Gantt chart with the available records. This Gantt chart extension allows you to effortlessly visualize three distinct types of form data.
   

1. Basic Form 
   

2. Form with a lookup field
   

3. Form with lookup and subform
   

Find out more about scripts below. You must have the necessary fields in the form to generate a Gantt chart. Let's look at the parameters and scripts for each form type.

Note: Please follow string data type for all input parameters.  

4.1 Basic  Form 

The below script is suitable for a form that has fields containing task names, along with start and end dates.

Find the sample script below:

1. input.data =
2. {
3. "reportName":"All_Tasks",
4. "chartSetup":{
   
5. "dateFormat": "dd-MM-yyyy",
6. "fields":
7. {
8. "taskName":"Task_name",
9. "startDate":"Start_date",
10. "endDate":"End_date"
11. }
12. }
13. };

4.2  Form with a Lookup field 

This script is suitable for a form that has a lookup field. For example, imagine you have a Task form with a Project lookup field to associate tasks with their respective projects. 

 

Field name	Field data type	Field link name	Description
Task name	Single line	Task_name	To record the task name
Start date	Date	Start_date	To record the start date of the task
End date	Date	End_date	To record the end date of the task
Project name	Single line	Project_name	To record the project name to which the task belongs. (bidirectional lookup field)

Please note that the lookup field has to bidirectional.

The below sample script generates a Gantt chart that displays all the tasks belonging to a particular project.

1. input.data = {
2.   "parentReport": "All_Projects",
3.   "reportName": "All_Tasks",
4.   "relationLinkName": "Project_name",
5.   "chartSetup": {
   
6.   "dateFormat": "dd-MM-yyyy",
7.     "fields": {
8.       "taskName": "Task_name",
9.       "startDate": "Start_date",
10.       "endDate": "End_date"
11.        }
12. }
13.     };
    

4.3  Form with Lookup and Subform 

This script is suitable for a form that has a lookup field and a subform. This can be used in the cases where the Gantt chart has to include tasks with their subtasks.

Project ----> Tasks ----> Sub Tasks

Please note that the lookup field has to bidirectional.

Project Form

Use the below sample script for this type of forms:

 

Parameter	Description
parentReport	Denotes the report name of the form(Another form that has project details to which these tasks are mapped)
reportName	Name of the Gantt chart report
relationLinkName	The field link name of the project field in the form to which the tasks are related.
dateFormat (Optional)	The date format specified in the date and time settings in your application settings. Supported Formats: dd-MM-yyyy (Default) dd-MMM-yyyy MM-dd-yyyy
record ID	Denotes the ID of a record in Project form. This parameter is optional. It is used to show the Gantt chart with the project of this record ID by default.
taskName	The field link name of the task field where the task names are recorded.
startDate	The field link name of the start date of the task.
endDate	The field link name of the end date of the task
subReportName	Report name of the subform
subRelationName	The lookup field link name of the form used within the subform
subTaskName	The field link name of the subtask field
subStartDate	The field link name of the start date of the subtask.
subEndDate	The field link name of the end date of the subtask.

 

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

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

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

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

5.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 as shown in the Example section below.

6. Example

Let's imagine that you are using a Project Management application to organize tasks and subtasks.

To configure this extension:

1. Create a form with any of the above three specified form structures. Here, let's assume a form with subform.

2.  Embed this extension in any of your pages in your application.

3. Configure the page script as below to generate the Gantt chart. The below script suits a form with subform that also applies theme to the chart and bar colors based on task status.

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