Gantt Chart in Salesforce using JQuery and JSON

Author posted by Jitendra on Posted on under category Categories Apex, Salesforce, Visualforce and tagged as Tags , , with 42 Comments on Gantt Chart in Salesforce using JQuery and JSON

Tutorial and Example of creating the 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)/"]});
     });

</script>

</apex:page>

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

Related posts

42 thoughts on “Gantt Chart in Salesforce using JQuery and JSON”

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

      Regards,
      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.

      Regards,
      Jitendra 

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

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

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

  11. 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!

  12. 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.
    https://uploads.disquscdn.com/images/517d7628000ae867e4e665382d338aedec9df1811a9316e800d60f9234867d8b.jpg
    This is normal view
    https://uploads.disquscdn.com/images/a5d71cc5707989c7ce31196c1e02d2dfa2d32124d8d1401d9028c9a5db217d6c.jpg

Leave a Reply

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