Gantt chart extension

Gantt Chart Extension

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.

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

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

  1. Add the below page variable in the page. 

    Parameter

    Data Type

    data

    TEXT


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

 

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 


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

 

Parameter

Description

reportName

Name of the report that will be used as the reference for the Gantt chart.

dateFormat
(Optional)
The date format specified in the date and time settings in your application settings.
Supported Formats:
  1. dd-MM-yyyy (Default)
  2. dd-MMM-yyyy
  3. MM-dd-yyyy

taskName

The field link name of the task field where the task names are recorded.

startDate

The field link name of the start date field of the task.

endDate

The field link name of the end date field of the task

 

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

Parameter

Description

parentReport

Denotes the report name of the form(another form containing project details) from which the lookup is used in the tasks form.

reportName

Name of the report that will be used as the reference for the Gantt chart

relationLinkName

The link name of the project lookup field in the Task 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:
  1. dd-MM-yyyy (Default)
  2. dd-MMM-yyyy
  3. MM-dd-yyyy

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

 

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.


Let's say there is a form Task with a lookup field Project to map the tasks to a particular project. It also has a subform Sub Tasks to store the sub tasks in a task.

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

 

 

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)

Subtask name

Single line

Subtask_name

To record the subtask name

Subtask Start date

Date

Subtask_Start_date

To record the start date of the subtask

Subtask End date

Date

Subtask_End_date

To record the end date of the subtask

Please note that the lookup field has to bidirectional.

Project Form



Task Form

 

Use the below sample script for this type of forms:


  1. input.data =
  2. {
  3. "parentReport":"All_Projects",
  4. "reportName":"All_Tasks",
  5. "relationLinkName":"Project_name",
  6. //"recordID": "4258555000007444076",
  7. //The above record ID optional - it is used to show a project by default when you view the page).
  8. "chartSetup":
  9. {
  10. "dateFormat": "dd-MM-yyyy",
  11. "fields":
  12. {
  13. "taskName":"Task_name",
  14. "startDate":"Start_date",
  15. "endDate":"End_date",
  16. "subData":{
  17. "subReportName":"Sub_Tasks_Report",
  18. "subRelationName":"Sub_Tasks",
  19. "subFields":
  20. {
  21. "subTaskName":"Subtask_name",
  22. "subStartDate":"Subtask_Start_date",
  23. "subEndDate":"Subtask_End_date"
  24. },
  25. "expansion":true
  26. }
  27. }
  28. }
  29. };

 

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:
  1. dd-MM-yyyy (Default)
  2. dd-MMM-yyyy
  3. 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.

 

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.

  1.  "theme": {
  2.         "color" : "pink",
  3.         "fontColor" : "#FFF"
  4.         }

The above script sets the color and font of the extension.
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.

  1. "colors" : ["#ff793f", "#706fd3", "#6ab04c","#ffff00"]

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.

  1.  "colors": {
  2. "basedOn": "Status",
  3. "values": {
  4. "Pending": "yellow",
  5. "In Progress": "blue",
  6. "Completed": "#4CAF50"
  7. }
  8. }
  • 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.

Field Type

Field Name

Field Link name

Single Line

Task Name

task_name

Date

Start Date

task_start_date

Date

End Date

task_end_date

Single Line

Status

task_status

Lookup field

Project Name

project_name

Subform fields

Single Line

Sub Task

sub_task_name

Date

Start Date

sub_task_start_date

Date

End Date

sub_task_end_date 

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

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

  1. input.data =
  2. {
  3. "parentReport":"All_Projects",
  4. "reportName":"All_Tasks",
  5. "relationLinkName":"project_name",
  6. "chartSetup":
  7. {
  8. "dateFormat": "dd-MM-yyyy",
  9. "fields":
  10.   {
  11.   "taskName":"task_name",
  12.   "startDate":"task_start_date",
  13.   "endDate":"task_end_date",
  14.   "subData":{
  15.   "subReportName":"Sub_Task_Report",
  16.   "subRelationName":"task_name",
  17.   "subFields":
  18.     {
  19.      "subTaskName":"sub_task_name",
  20.      "subStartDate":"sub_task_start_date",
  21.      "subEndDate":"sub_task_end_date"
  22.     },
  23.   "expansion":true
  24.   }
  25.   },
  26. "theme": {
  27. "color" : "pink",
  28. "fontColor" : "#FFF"
  29. },
  30. "colors" : {
  31. "basedOn": "subTaskStatus",
  32. "values": {
  33.   "Pending": "yellow",
  34.   "In Progress": "blue",
  35.   "Completed": "#4CAF50"
  36.   }
  37.  }
  38.  }
  39. }


After saving the above page script, the Gantt chart can be viewed in the page where the extension is embedded. It also provides options to view in day, week, month, or year intervals. The left pane provides a dropdown to filter the task and view its subtasks.

 

 

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.

 

 


    Access your files securely from anywhere

      Zoho CRM Training Programs

      Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

      Zoho CRM Training
        Redefine the way you work
        with Zoho Workplace

          Zoho DataPrep Personalized Demo

          If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

          Zoho CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION





                          Quick Links Workflow Automation Data Collection
                          Web Forms Enterprise Begin Data Collection
                          Interactive Forms Workplace Data Collection App
                          CRM Forms Customer Service Accessible Forms
                          Digital Forms Marketing Forms for Small Business
                          HTML Forms Education Forms for Enterprise
                          Contact Forms E-commerce Forms for any business
                          Lead Generation Forms Healthcare Forms for Startups
                          Wordpress Forms Customer onboarding Order Forms for Small Business
                          No Code Forms Construction RSVP tool for holidays
                          Free Forms Travel
                          Prefill Forms Non-Profit

                          Intake Forms Legal
                          Mobile App
                          Form Designer HR
                          Mobile Forms
                          Card Forms Food Offline Forms
                          Assign Forms Photography
                          Mobile Forms Features
                          Translate Forms Real Estate Kiosk in Mobile Forms
                          Electronic Forms

                          Notification Emails for Forms Alternatives Security & Compliance
                          Holiday Forms Google Forms alternative  GDPR
                          Form to PDF Jotform alternative HIPAA Forms
                          Email Forms
                          Encrypted Forms
                          Embeddable Forms
                          Secure Forms
                          Drag and Drop form builder
                          WCAG


                                            You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Add and Configure Gantt Chart Extension on Your Zoho Creator Page

                                                                                                                Requirement Include a Gantt Chart extension in your Zoho Creator application to visualize and understand your project schedule, task duration, overlapping tasks, milestones, and deadlines. Use Case Consider a Zoho Creator task management application ...
                                                                                                              • Add style to chart

                                                                                                                The Style tab allows you to add customization to the charts by applying different chart themes , setting legend position and adding a background color . You can also change the chart type from the slider pane on the left. Apply style to a chart ...
                                                                                                              • Configure bar chart

                                                                                                                A horizontal bar chart displays your categorical data in rectangular bars with lengths proportional to the values they represent. They are similar to column charts and are preferred when dealing with larger data and numbers. S tacked bar charts have ...
                                                                                                              • Configure line chart

                                                                                                                Line charts are used to depict trends over periods of time such as analyzing long-term trends in sales, financial data, or marketing statistics. The vertical axis usually displays numeric values, while the X-axis indicates certain specific time ...
                                                                                                              • Configure area chart

                                                                                                                Area charts are similar to line charts, the difference being that the area between the x-axis and line is filled with color or pattern. Using area charts, users can analyze individual as well as an overall change in your data and are ideal for ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources