Gantt Chart in Salesforce using JQuery and JSON

I have searched a lot for any library available for the Gantt Chart however there are very few available on the web. Even i was not able to find out the chart in “Google API”.

In this article, i will delineate creating the “Gantt Chart” using JQuery and JSON. In previous article we have seen that how to generate JSON using Salesforce. So continuing the last article, i will use the same JSON reponse to create the “Gantt Chart”.

What is Gantt Chart?

A Gantt chart is a type of bar chart, developed by Henry Gantt, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.

In this example i am going to create the Gantt Chart for room reservation system. for this i am going to use the JQuery plugin for creating Gantt Chart found here.

Plugin uses following JSON format :

[{  "name"  : "Task#1"
  , "desc"  : " Task Desc"
  , "values": [
      {  "from"       : "/Date(1296547200000)/"
       , "to"         : "/Date(1296554400000)/"
       , "desc"       : "<b>Task #1<br>"
       , "customClass": "ganttRed" (optional)
       , "label"      : "Task #1" (optional)
      {  "from"       : "/Date(1296637200000)/"
       , "to"         : "/Date(1296649800000)/"
       , "desc": "<b>Task #</b>"
       , "customClass": "ganttOrange" (optional)
       , "label": "Task #1" (optional)

However we know that the variable name “from” and “desc” are not valid in Apex because they are keyword. so as a workaround i am replacing the placeholders after the generation of JSON in previous article.

I have added the Static Resource of name “GanttChart” which includes the jQuery and jQuery plugin to draw the Gantt Chart.

Download Complete Source code for Gantt Chart in Salesforce with Static resources

following visualforce page renders the Grantt chart on the basis of JSON passed:

<apex:page standardStylesheets="false" sidebar="false">

<apex:stylesheet value="{!URLFOR($Resource.GanttChart, 'style.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.GanttChart, 'js/jquery-1.5.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.GanttChart, 'js/jquery.fn.gantt.js')}"/>

<div class="gantt" />

<script type="text/javascript">

$gc = jQuery.noConflict();

function getHostName()
    var p = $gc(location).attr('href');
    pathArray = p.split( '/' );
    var protocol = pathArray[0];
    var host = pathArray[2];
    return protocol+'//'+host;

	var jsonDataURL = getHostName()+'/apex/GanttChartData?core.apexpages.devmode.url=0';

	$gc(function () {
     	$gc(".gantt").gantt({source: jsonDataURL, navigate: 'scroll', scale: 'hours', maxScale: 'hours', minScale: 'hours', hollydays: ["/Date(1293836400000)/"]});



Gantt Chart will be rendered in div tag having class name as “gantt“.

Note : We have to Remember one thing that the Date must be passed in format of “/Date(VALUE_IN_MIL_SECOND)/” because regular expression is used by the plugin to identify and convert back date to javascript format.

Refer this API for Datetime methods of the Salesforce

The output will look like:

Gantt Chart in Salesforce
Gantt Chart in Salesforce

Download Complete Source code for Gantt Chart in Salesforce with Static resources


  1. I’m trying to pass the following JSON string to the Gantt chart, but only an empty frame appears. Is there something wrong with the string or is my error elsewhere? Thanks!
    [ {
    “values” : [ {
    “to” : “/Date(1337929200000)/”,
    “label” : “Item2”,
    “from” : “/Date(1336546800000)/”,
    “desc” : “test”,
    “customClass” : null
    }, {
    “to” : “/Date(1337324400000)/”,
    “label” : “Item1”,
    “from” : “/Date(1336978800000)/”,
    “desc” : “test”,
    “customClass” : null
    } ],
    “name” : “Test”,
    “desc” : “This is a test”
    } ]

    1. Hi,
      Either don’t pass “CustomClass” or its value must be one of “ganttRed, ganttGreen or  ganttOrange”.

  2. Hi,
    Also tell me what should I do if I have to remove the navigatipn panel and styling not be effected..thanks in advance

    1. Hi Reshma,
      Add below CSS in your page,

      .fn-gantt .navigate { display:none;}

      Jitendra Zaa

      1. I tried the same jitendra but the box appears to have a static width of 800px and m not able 2 do dat relative..
        Is there any way for the same??

        1. Can you explain, what exactly you want ? i can surely help you. If you can send me print screen what is your expectation then i can help.

          1. I have attached the screenshot..
            You can see the blank space int he end.
            I dont want it
            I want the outer border to be fitted accordingly..

  3. Hi Jitendra,
    Sorry to disturb you again..
    But in the Above gantt chart what if i dont want to display the chart for multiple years..
    I want it to be displayed for single year only & The place where we show year I would like to have a hyperlink where i can choose the year for which the chart is to be displayed..
    I have attached an image of the way i am using it and how i want it..
    Its not very clear but it would be great if you could guide me for the same..

    1. Hi Reshma,
      Q1. Dont show multiple year.
      Ans : In JSON do not pass the multiple year value. it will automatically display single year.

      Q2 : Display Hyperlink.
      Ans : It would be tough because that is rendered using JQuery. If you are good in Javascript and JQuery then you will need to modify file “jquery.fn.gantt.js” as per your requirement.


      1. But i want to take all the data in json string and then render according to the year selected..
        How do i acheieve this???

      2. Hi Jetendra,

        How can we display only dates instead of Date and then date time. Since i will like to display only dates in the gantt chart and not time?

        1. Hi Ramesh,
          I dont think its possible in above example. Because Whole library is written as 24 hours time line,

          1. Jitendra,

            Thank you. I tried this stuff and it worked: (in GanttChartPage – VisualForce page)

            $gc(function () {
            $gc(“.gantt”).gantt({source: jsonDataURL, navigate: ‘scroll’, scale: ‘days’, maxScale: ‘days’, minScale: ‘Days’, hollydays: [“/Date(1293836400000)/”]});

  4. Hi Jitendra,
    Is there any limitations on number of rows in this component as my component is not rendering more than 7 rows..
    I was thinking there might be something wrong in the data passed but my data seems to be fine..

    1. Hi Reshma,
      Many years too late for you but…edit the jquery.fn.gantt.js file and change the setting itemsPerPage.
      Hope this helps someone.
      Thanks JitendraZaa for this blog – very useful and instructive.

  5. Hi Jitendra,

    I am using your ganttchart example and in jsonformat i am getting the data on page but another page display an empty frame. Please reply soon.

  6. Hi Jitendra,

    I am using your code to display gantt chat for project but i want to have different format for display like you can see in snapshot given by Reshma.Also in my case i am getting blank space but value is there

    1. Hello,
      I am trying to do something similar. Can you please share with me your codes to draw the gantt using custome object data?

  7. Hi Jitendra,
    I am having issue when I there are more than 1 page in the GanttChart.
    When I click on the the next page button, it goes to the next page but
    only shows a greyed out chart and allows no more interaction. And shows
    “Please wait” in the bottom. After that it does not allow any action on
    that page. Can you please help?

  8. Hi Jitendra Zaa,

    In ganttchart below we are having back button, when clicks on it goes to back page but data is bouncing out of chart in that page. But some records it sorks fine. How to overcome this in salesforce.

    Thanks in advance!!!

  9. Hello, I develop under your salesforce gantt. But I have a problem when I want to link data with gantt… Could you help me?

  10. Hi Jitendra,

    I have run the above code. It just display the frame only. I didn’t get any result/chart. Can you help me, how to run this program. Thanks for Advance!.

  11. hi, i want to ask how to remove the description column? because when i am editing the CSS for gantt.desc width, the gantt chart appears blank

  12. Hi, This Gantt is really good and very useful. I had a question on how to add headers to the left columns of the Gantt. It would be great if you can help me with this.

    Thanks In Advance!

  13. Hi,

    Thanks for the code. I need to pass the values to GanttChartData class file. Please help me how to do that.

  14. I am implemented this gantt chart in lightning component , but my requirement is need to display chart based on current date only, how to remove year & month labels from chart. when ever i remove year and month i got this out put.
    This is normal view

    1. Hi Ramakrishna,
      Did you finish this development? If so, please share your code. I’ve got as far as being able to load the libraries sucesfully in a lightning component. I’m struggling to get further so a short-cut would be appreciated from someone who’s already done the leg work. Hope to hear from you. It’s only a year ago you posted!

  15. Hi,

    I have just copy pasted the code which is in the blog. However i am unable to display the Gantt chart. i am getting a blank screen. Could you please help me .

    Sai Mounika

  16. Either position of the Gantt boxes are not accurate as per time in API or only I am getting this issue. Please help.

  17. How to change the value in the bar like in this eg, Jitendra is wrtten. So what to do if i want some other value added or to change that value

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.