zGantt - Simple Gantt Chart for Zoho Creator - Version 2

Note: Version 2 is not yet released. If you are using Version 1, please refer to the Version 1 documentation. When Version 2 becomes available, follow Zoho’s Widget Installation and Management Guide for instructions on updating your Gantt Chart setup to the latest version. Stay tuned for updates!

1. Overview

The Simple Gantt Chart extension helps the organization to effortlessly track task details on a visual timeline. With intuitive filtering capabilities, users can seamlessly switch between weekly, monthly, yearly, or custom date range views also visualize tasks with multiple levels with task dependencies and customize the cart as you like. Streamline task management and enhance productivity.

2. Key Features

1. Dynamic Task Visualization: Effortlessly visualize tasks and subtasks on a multi-level Gantt timeline, offering a comprehensive view of projects, milestones, and tasks.
2. Flexible Viewing Options: Switch seamlessly between day, week, month, and year views to suit your needs and preferences.
3. Custom Date Range Filters: Filter tasks based on specific date ranges for streamlined management and targeted analysis.
4. Advanced Customization: Adjust task colors based on field values, control header visibility, and set default zoom levels.
5. Enhanced Interactivity: Responsive design with tooltips for detailed task information and easy-to-navigate controls.

3. Installing the Extension

Installing the extension from Zoho Marketplace is easy, and it can be used as soon as it's installed. Follow these steps to learn more about installing extensions.

1. Go to Zoho Marketplace.

2. Click Extensions and select Zoho Creator.

3. Search for the 'Simple Gantt Chart for Zoho Creator' extension and click Install.
4. The extension will be installed on your Creator account, and you'll be ready to go.

4. Set-Up the Extension

4.1. Prerequisites

Form Fields:

**You must have the following fields in the form which will be used for Gantt visualization

Field Data Type	Description
Single Line	To display the task title
Date / Date-Time	To display the Start Date-Time of the Task
Date / Date-Time	To Display the End Date-Time of the Task
Lookup (optional *)	Parent record link field to setup Gantt chart with multiple task levels / dependencies. Mandatory parameter when configuring gant chart with multiple levels (ie: Projects -> Tasks)

Create a new page and embed the extension or use the extension into an existing page by following these steps.

Page Variables:

In order to get this extension working, you need to supply values in the page variables. The list of variables required for the proper functioning of this extension is shown below (refer to the highlighted variable in the image below and in the table).

Parameter	Data Type	Description
zgantt_prop_config	Text / String	Variable to store the configuration details for the extension

4.2. Setup Example 1: Single Form

1. Create a form named ToDos (form link name ToDos) with the following details to capture the data in a report (report link name All_ToDos)

Filed Type	Field Name	Field Link Name
Single Line	ToDo_Name	ToDo_Name
Date / Date-Time	Start Time	Start_Time
Date / Date-Time	End Time	End_Time

2. Embed this extension in any of your pages in your application and add the mentioned page variables to the page.

3. Configure the page script to supply the values for the specified page variables, as shown below with the deluge code.

1. //  task (ToDo) form config
2. taskConfig = Map();
3. taskConfig.put("report_link_name","All_ToDos");
4. taskConfig.put("task_title","ToDo_Name");
5. taskConfig.put("start_date","Start_Time");
6. taskConfig.put("end_date","End_Time");
7. taskConfig.put("date_format","yyyy-MMM-dd");
8. taskConfig.put("zoom_level","Months");
9. // 
10. input.zgantt_prop_config = taskConfig.toString();

4.3. Setup Example 2: Form with Subform / Lookup

1. This example will give the script and show how we can visualize a form with multiple subforms / looks up fields. Suppose you're tracking projects in your creator application and that each projects have either sub-tasks or tasks under milestones, you can use the following example

Projects ----> Milestones ----> Tasks

Field Data Type	Description
Single Line	To display the task title
Date / Date-Time	To display the Start Date-Time of the Task
Date / Date-Time	To Display the End Date-Time of the Task
Lookup	Parent record link field to setup Gantt chart with multiple task levels / dependencies for Gantt chart with multiple levels of tasks

2. Embed this extension in any of your pages in your application and add the mentioned page variables to the page.

3. Configure the page script to supply the values for the specified page variables, as shown below with the deluge code.

1. // parent task config - LEVEL 0
2. taskConfig = Map();
3. taskConfig.put("report_link_name","All_Projects");
4. taskConfig.put("task_title","Project_Name");
5. taskConfig.put("start_date","Start_Date");
6. taskConfig.put("end_date","End_Date");
7. // milestones form config - LEVEL 1 tasks should be linked with LEVEL 0
   
8. subTaskConfigLevel1 = Map();
9. subTaskConfigLevel1.put("report_link_name","All_Milestones");
10. subTaskConfigLevel1.put("task_title","Milestone");
11. subTaskConfigLevel1.put("start_date","Start");
12. subTaskConfigLevel1.put("end_date","End");
13. subTaskConfigLevel1.put("parent_task_lookup_field","Project_Lookup");
14. // sub-tasks record config - LEVEL 2 tasks should be linked with LEVEL 1
15. subTaskConfigLevel2 = Map();
16. subTaskConfigLevel2.put("report_link_name","Tasks_Report");
17. subTaskConfigLevel2.put("task_title","Task");
18. subTaskConfigLevel2.put("start_date","Start");
19. subTaskConfigLevel2.put("end_date","End");
20. subTaskConfigLevel2.put("parent_task_lookup_field","Milestone_Lookup");
21. //
22. subtaskConfigMap = map();
23. subtaskConfigMap.put("level_1", subTaskConfigLevel1);
24. subtaskConfigMap.put("level_2", subTaskConfigLevel2);
25. //
26. taskConfig.put("sub_task_props",subtaskConfigMap);
27. taskConfig.put("date_format","yyyy-MMM-dd");
28. //
29. input.zgantt_prop_config = taskConfig.toString();
    

4.4. Chart Configuration Parameters (All Parameters)

This table provides a detailed breakdown of the parameters used in the Gantt chart configuration

Parameter	Description
zgantt_prop_config	Page variable that sets up configuration values for the Gantt chart.
report_link_name	Identifies the data source for the top-level task (Level 0).
task_title	The field link name representing the task or project name in the chart.
start_date	Field link name for the task’s start date.
end_date	Field link name for the task’s end date.
colors	An object specifying the field used for color coding tasks and the corresponding color values based on the task status. [Optional]
sub_task_props	An object defining the properties for hierarchical levels like milestones and tasks.
level_1, level_2 and level_3	Levels within the Gantt chart for structuring subtasks such as milestones, tasks and sub-task / dependency under projects for example. Includes the following properties: report_link_name : Specifies the report source for each level (e.g., All_Milestones for level 1 and Tasks_Report for level 2). task_title : The field representing the name for each level (e.g., Milestone or Task). start_date: Field for start date / date time end_date : Field for end date / date time parent_task_lookup_field : Links each sub-level to its parent level (e.g., Project_Lookup for level 1 and Milestone_Lookup for level 2). colors : Specifies colors based on status (e.g., New , InProgress ).  Example Script (JSON): "sub_task_props": {       "level_1": {         "report_link_name": "All_Milestones",         "task_title": "Milestone",         "start_date": "Start",         "end_date": "End",         "parent_task_lookup_field": "Project_Lookup",         "colors": {           "field": "Status",           "value": {             "New": "red",             "InProgress": "orange",             "Completed": "green",             "Hold": "grey"           }         }       },       "level_2": {         "report_link_name": "Tasks_Report",         "task_title": "Task",         "start_date": "Start",         "end_date": "End",         "parent_task_lookup_field": "Milestone_Lookup",         "colors": {           "field": "Status",           "value": {             "New": "red",             "InProgress": "orange",             "Completed": "green",             "Hold": "grey"         }        "level_3": {           "report_link_name": "Sub_Tasks_Report",           "task_title": "Task",           "start_date": "Start",           "end_date": "End",           "parent_task_lookup_field": "Parent_Task",           "colors": {             "field": "Status",             "value": {                "New": "red",                "InProgress": "orange",                "Completed": "green",                "Hold": "grey"           }     } } All Parameters of Level 1, Level 2 and Level 3 exept colors config is mandatory when configuring Multi level gantt chart
colors	This object lets you set colors for tasks based on a specific field, such as task status, and you can customize colors for each task level separately. [Optional] Field: Specifies which field controls the color (e.g., Status). Value: Matches field values (e.g., New, InProgress, Completed, Hold) to their corresponding colors (red, orange, green, grey). This makes it easy to visualize tasks based on their current status. Example Script (JSON): "colors": {       "field": "Status",       "value": {         "New": "red",         "InProgress": "orange",         "Completed": "green",         "Hold": "grey"       } }
date_format	Specifies the date format for the chart. [Optional] Following date formats are currently supported yyyy-MM-dd (Default) dd-MM-yyyy dd-MMM-yyyy yyyy-MMM-dd
show_dependancy_links	true / false value to show or hide task dependancy links. [Optional]
expand_tasks	Set to true/false to control if tasks expand by default. [Optional]
show_grid	true / false value to show or hide grid view. [Optional]
show_header	true / false value to show or hide gantt header. [Optional]
zoom_level	Controls the chart's zoom level. [Optional] Supported Zoom levels are Days Weeks (Default) Months Years
gantt_title	Text / HTML content for the Gantt chart title, supporting logos or other HTML elements. [Optional]
default_task_record_id	This is an optional field for specifying a default record ID, representing the top-level (LEVEL 0) task in the Gantt chart. If an ID is provided, related records will automatically be shown in the chart when multiple levels (like projects, milestones, and tasks) are configured. [Optional]

Be sure to refer to the example provided below to see how to effectively use these parameters in your Gantt chart configuration.

5. Chart Customization Options

1. Task Bar
2. Task Grid
3. Header
4. Date Format

5.1. Task Bar

5.1.1. Task Bar Custom Colors

      Use the following script to customize the task bar color based on any field's value.

      For example, if you're tracking tasks in your application based on the priority then you can assign different colors to each       priority value to quickly identify the tasks which needs immediate attention.

      Deluge Script

1. taskColorConfig = {"field":"Priority","value":{"Low":"grey","Medium":"orange","High":"red"}};
2. taskConfig.put("colors", taskColorConfig);

      JSON

1. "colors":{
2. "field":"Priority",
3. "value":{
4.       "Low":"grey",
5.       "Medium":"orange",
6.        "High":"red"
7.      }
8. }

Also, you can customize the color for all three levels of tasks individually in the Gantt Chart. See the Example

5.1.2. Task Dependancy Links

      Use the following script to enable disable dependancy links for gantt chart with multiple levels

      Deluge Script

1. taskConfig.put("show_dependancy_links",false);

      JSON

1. {
   
2.      "show_dependancy_links": true
3. }

true => Dependancy link will be shown for each tasks

false => Dependancy link will not be shown for tasks

5.2. Task Grid

Use the following script to customize the Gantt chart task grid

5.2.1. Show / Hide Task Grid

      Deluge Script

1. taskConfig.put("show_grid",false);

      JSON

1. {
   
2.      "show_grid": true
3. }
   

     

true => Task Grid will be displayed

false => Grid will be hidden

5.2.2. Expand / Collapse Task Grid

       Deluge Script

1. taskConfig.put("expand_tasks",false);

      JSON

1. {
   
2.      "expand_tasks": true
3. }

true => Task tree will be expanded by default

false => Task tree will be collapsed by default

5.3 Header

Use the following script to customize your Gantt chart header section

5.3.1.  Show / Hide Header

       Deluge Script

1. taskConfig.put("show_header",false);

      JSON

1. {
   
2.      "show_header": true
3. }

true => Header will be displayed

false => Header will be hidden

5.3.2. Customize Gantt Chart Title

By default the Gantt chart title will show as "Simple Gantt" and if you want change it, you can use the following script and also change it's color or add your logo etc by using HTML script with it.

       Deluge Script

1. taskConfig.put("gantt_title","Project Timeline");

      JSON

1. {
   
2.      "gantt_title":"Project Timeline'
3. }

Use the following script as a reference to customize the title using HTML

      Deluge Script

1. taskConfig.put("gantt_title", "<img src='https://marketplace.zoho.com/view/logo/74585ef2-94a0-481a-a4ad-0d395713b65e' alt='logo' style='margin-right:10px;' width='40' height='40'>Simple Gantt');

5.4. Date Format

Use the following script to format the date in your Gantt chart as you want. Currently the following formats are supported

Date Format	Description
yyyy-MM-dd	2024-01-31 (Default)
dd-MM-yyyy	31-01-2024
dd-MMM-yyyy	31-Jan-2024
yyyy-MMM-dd	2024-Jan-31

      Deluge Script

1. taskConfig.put("date_format","yyyy-MMM-dd");

      JSON

1. {
   
2.      "date_format":"yyyy-MMM-dd'
3. }

6. Example

Imagine you're managing projects in Zoho Creator, complete with project details, milestones, and tasks under each milestone. To effectively visualize and track your projects, you can configure the Gantt chart using the following parameters. The script below demonstrates how to set up these parameters for optimal project management.

Additionally, the attached images showcase the resulting Gantt chart with colors based on task status, providing a clear visual representation of your project's structure and status.

      Deluge Script

1. // parent task config - LEVEL 0
2. parentTaskConfig = Map();
3. parentTaskConfig.put("report_link_name","All_Projects");
4. parentTaskConfig.put("task_title","Project_Name");
5. parentTaskConfig.put("start_date","Start_Date");
6. parentTaskConfig.put("end_date","End_Date");
7. parentTaskColorConfig = {"field":"Status","value":{"New":"red","InProgress":"orange","Completed":"green","Hold":"grey"}};
8. parentTaskConfig.put("colors",parentTaskColorConfig);
9. // milestones form config - LEVEL 1 tasks should be linked with LEVEL 0
10. subTaskConfigLevel1 = Map();
11. subTaskConfigLevel1.put("report_link_name","All_Milestones");
12. subTaskConfigLevel1.put("task_title","Milestone");
13. subTaskConfigLevel1.put("start_date","Start");
14. subTaskConfigLevel1.put("end_date","End");
15. subTaskConfigLevel1.put("parent_task_lookup_field","Project_Lookup");
16. SubTaskL1kColorConfig = {"field":"Status","value":{"New":"red","InProgress":"orange","Completed":"green","Hold":"grey"}};
17. subTaskConfigLevel1.put("colors",SubTaskL1kColorConfig);
18. // sub-tasks record config - LEVEL 2 tasks should be linked with LEVEL 1
19. subTaskConfigLevel2 = Map();
20. subTaskConfigLevel2.put("report_link_name","Tasks_Report");
21. subTaskConfigLevel2.put("task_title","Task");
22. subTaskConfigLevel2.put("start_date","Start");
23. subTaskConfigLevel2.put("end_date","End");
24. subTaskConfigLevel2.put("parent_task_lookup_field","Milestone_Lookup");
25. SubTaskL2kColorConfig = {"field":"Status","value":{"New":"red","InProgress":"orange","Completed":"green","Hold":"grey"}};
26. subTaskConfigLevel2.put("colors",SubTaskL2kColorConfig);
27. //
28. subtaskConfigMap = Map();
29. subtaskConfigMap.put("level_1",subTaskConfigLevel1);
30. subtaskConfigMap.put("level_2",subTaskConfigLevel2);
31. ganttPropConfig = Map();
32. ganttPropConfig.putAll(parentTaskConfig);
33. ganttPropConfig.put("sub_task_props",subtaskConfigMap);
34. ganttPropConfig.put("date_format","yyyy-MMM-dd");
35. ganttPropConfig.put("expand_tasks",true);
36. ganttPropConfig.put("show_grid",true);
37. ganttPropConfig.put("show_header",true);
38. ganttPropConfig.put("zoom_level","Years");
    
39. ganttPropConfig.put("show_dependancy_links",false);
40. ganttPropConfig.put("gantt_title","<img src='https://marketplace.zoho.com/view/logo/74585ef2-94a0-481a-a4ad-0d395713b65e' alt='logo' style='margin-right:10px;' width='40' height='40'>Project Timeline Report");
41. //
42. input.zgantt_prop_config = ganttPropConfig.toString();

      JSON

1. {
2.   "zgantt_prop_config": {
3.     "report_link_name": "All_Projects",
4.     "task_title": "Project_Name",
5.     "start_date": "Start_Date",
6.     "end_date": "End_Date",
7.     "colors": {
8.       "field": "Status",
9.       "value": {
10.         "New": "red",
11.         "InProgress": "orange",
12.         "Completed": "green",
13.         "Hold": "grey"
14.       }
15.     },
16.     "sub_task_props": {
17.       "level_1": {
18.         "report_link_name": "All_Milestones",
19.         "task_title": "Milestone",
20.         "start_date": "Start",
21.         "end_date": "End",
22.         "parent_task_lookup_field": "Project_Lookup",
23.         "colors": {
24.           "field": "Status",
25.           "value": {
26.             "New": "red",
27.             "InProgress": "orange",
28.             "Completed": "green",
29.             "Hold": "grey"
30.           }
31.         }
32.       },
33.       "level_2": {
34.         "report_link_name": "Tasks_Report",
35.         "task_title": "Task",
36.         "start_date": "Start",
37.         "end_date": "End",
38.         "parent_task_lookup_field": "Milestone_Lookup",
39.         "colors": {
40.           "field": "Status",
41.           "value": {
42.             "New": "red",
43.             "InProgress": "orange",
44.             "Completed": "green",
45.             "Hold": "grey"
46.           }
47.         }
48.       }
49.     },
50.     "date_format": "yyyy-MMM-dd",
51.     "expand_tasks": true,
52.     "show_grid": true,
53.     "show_header": true,
    
54.     "show_dependancy_links": false, 
55.     "zoom_level": "Years",
56.     "gantt_title": "<img src='https://marketplace.zoho.com/view/logo/74585ef2-94a0-481a-a4ad-0d395713b65e' alt='logo' style='margin-right:10px;' width='40' height='40'>Project Timeline Report",
57.   }
58. }

---

Note: To dynamically open a page with th Gantt Chart for a specific task or for all the tasks in various scenarios such as workflow action, functions, custom actions in reports, panel actions in pages, utilize the openURL task. This task allows you to supply values to the page variables through query parameters and use it in the page script.

1. openUrl("#Page:{page-link-name}?variable1={value}&variable2={value}");
   

---

7. Chart Components

8. Related Topics

↗️ Install and manage extensions

↗️ Page script and variables

9. Feedback

We value your feedback! Please take a moment to share your thoughts and suggestions using our feedback form. Your input helps us improve and provide the best experience possible.

10. Contact Us

If you have any questions or need assistance, feel free to reach out to us through the email mart[at]zitraar[dot]com.

• Related Articles

• zGantt - Simple Gantt Chart for Zoho Creator - Version 1

  Looking for the latest version? Check out the Version 2 documentation. To update your Gantt Chart from Version 1 to the latest, follow Zoho's Widget Installation and Management Guide for detailed instructions. This guide will walk you through the ...

• Estimates

  Creating and Managing Estimates Overview Estimates help you provide customers with a detailed breakdown of services, including customer details, service name, service date and it's related details. You can easily convert estimates into service ...

• Customer

  Creating and Managing Customer Details Overview The Customer Form allows you to efficiently add and manage customer details, including names, addresses, mobile numbers, and more. Located under the People tab, this form serves as a central hub for ...

• Persons

  Creating and Managing Persons Details Overview The Persons report is a comprehensive database that stores crucial details about content submitters. This includes their name, email, phone number, and profession. Whether they are writers, artists, or ...

• Companies

  Creating and Managing Company Details Overview The Company report is a comprehensive database that stores crucial details about a Company. This includes their name, email, phone number, and related information, this report provides a centralized view ...