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

Posted

in

, ,

by


Related Posts

Comments

51 responses to “Gantt Chart in Salesforce using JQuery and JSON”

  1. Steve Leslie Avatar
    Steve Leslie

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

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

  2. Reshma Avatar
    Reshma

    Hi,

    I am getting

    Error: dateStr is undefined

    Source File: https://c.na14.visual.force.com/resource/1337172237000/GanttChart/js/jquery.fn.gantt.js

    Line: 1399

    script error  when passing JSON using ganttchartdata page
    whereas it works fine when i use static JSON data on the same page..
    Please help me with this…

  3. Reshma Avatar
    Reshma

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

      Hi Reshma,
      Add below CSS in your page,

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

      Regards,
      Jitendra Zaa

      1. Reshma Avatar
        Reshma

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

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

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

        2. JitendraZaa Avatar
          JitendraZaa

          Have you tries this CSS?

          .gantt {width:100% !important;}

  4. Reshma_jewrani Avatar
    Reshma_jewrani

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

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

        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. P Ramesh Chander Avatar
        P Ramesh Chander

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

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

          1. P Ramesh Chander Avatar
            P Ramesh Chander

            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)/”]});
            });

    2. Reshma_jewrani Avatar
      Reshma_jewrani

      Hey got this 1..
      There is a field called ITemsperpage which decides this..
      Thanx anyway

  5. Reshma_jewrani Avatar
    Reshma_jewrani

    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. Dave Roberts Avatar

      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.

  6. Shivadhan Avatar
    Shivadhan

    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.

  7. Shivani Avatar
    Shivani

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

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

  8. subhash Avatar
    subhash

    can we render this to Excel?

    1. JitendraZaa Avatar
      JitendraZaa

      We cant render it to Excel because everything is done by Javascript

  9. Shravan Avatar
    Shravan

    Hi Jitendra,

    Can we implement Drap and Drop gantt functionality with this plugin?

    Regards,
    Shravan

    1. JitendraZaa Avatar
      JitendraZaa

      Hi Sharavan,

      I have doubt. You can try this plugin. http://gantt.twproject.com/distrib/gantt.html

  10. Anoop Yadav Avatar
    Anoop Yadav

    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?

  11. Thirupathi Avatar
    Thirupathi

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

  12. Somnath Dash Avatar
    Somnath Dash

    I am getting a square box.I am unable to get the gantt chart.

    1. JitendraZaa Avatar
      JitendraZaa

      Check your Javascript Console, if there is any error…

      1. Somnath Dash Avatar
        Somnath Dash

        I am kind of new to this field.How to do it?

        Thanks for the help

  13. Somnath Dash Avatar
    Somnath Dash

    i am getting a blank box.Though i followed all the process

  14. Guest Avatar
    Guest

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

  15. Dedex Avatar
    Dedex

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

  16. Dedex Avatar
    Dedex

    Is it possible to bind data to Salesforce Gantt chart ?

  17. Nila Avatar
    Nila

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

  18. Drin Avatar
    Drin

    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

  19. montu_yagnik Avatar
    montu_yagnik

    It is very useful tool for me , but i want show only current year data..is it possible ?

    1. Jitendra Zaa Avatar

      Yeah thats possible, you need to filter it in your code and then generate JSON for this

  20. Tulsi Avatar
    Tulsi

    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!

  21. danielle Avatar
    danielle

    How can we develop this in a lightning component?

  22. sreedevi Avatar
    sreedevi

    Hi,

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

  23. ramakrishna B Avatar
    ramakrishna B

    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

    1. Dave Roberts Avatar

      Hi Ramakrishna B. Did you get a solution to this?

  24. ramakrishna B Avatar
    ramakrishna B

    Please guide me…

    1. David Roberts Avatar

      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!

  25. David Roberts Avatar

    If I change the data for the chart (jsonString), how do I update the chart?

  26. sai mounika Avatar
    sai mounika

    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 .

    Regards,
    Sai Mounika

  27. sai mounika Avatar
    sai mounika

    I am getting a jquery error saying “Cannot read property ‘replace’ of undefined”.

  28. Yogesh Tiwari Avatar
    Yogesh Tiwari

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

  29. Shanya Avatar
    Shanya

    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

  30. widson Avatar
    widson

    I’m also getting blank, could someoone please assist me?

Leave a Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading