1. Overview  

The Gantt chart is a powerful project management tool that illustrates your project's schedule, outlining tasks in a timeline with their respective start and end dates. Each task is represented by a horizontal bar called Gantt bars. It provides an overall view of the project as it depicts various factors like task duration, overlapping tasks, milestones, and deadlines. With this Gantt chart extension, you can efficiently plan, schedule, and track your projects within Zoho Creator applications.

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. For the extension to function properly, you need to 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. "fields":
6. {
7. "taskName":"Name",
8. "startDate":"Start_Date",
9. "endDate":"End_Date"
10. }
11. }
12. };

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.

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",
5.   "chartSetup": {
6.     "fields": {
7.       "taskName": "Name",
8.       "startDate": "Start_Date",
9.       "endDate": "End_Date"
10.        }
11. }
12.     };
    

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

Use the below sample script for this type of forms:

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.
  

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.
   
   

   input.data =

   {

   "parentReport":"All_Projects",

   "reportName":"All_Tasks",

   "relationLinkName":"project_name",

   "recordID":"4258555000007444076",

   "chartSetup":

   {

   "fields":

     {

     "taskName":"task_name",

     "startDate":"task_start_date",

     "endDate":"task_end_date",

     "subData":{

     "subReportName":"Sub_Task_Report",

     "subRelationName":"task_name",

     "subFields":

       {

        "subTaskName":"sub_task_name",

        "subStartDate":"sub_task_start_date",

        "subEndDate":"sub_task_end_date"

       },

     "expansion":true

     }

     }

     

   }

   "theme": {

   "color" : "pink",

   "fontColor" : "#FFF"

   }

   };

   "colors" : {

   "basedOn": "subTaskStatus",

   "values": {

     "Pending": "yellow",

     "In Progress": "blue",

     "Completed": "#4CAF50"

            }

   } 

7. Related Topics

• Install and manage extensions

• Page script and variables