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

  • 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”
    } ]
     

    • JitendraZaa

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

  • 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…

  • 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

    • JitendraZaa

      Hi Reshma,
      Add below CSS in your page,

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

      Regards,
      Jitendra Zaa

      • 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??

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

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

        • JitendraZaa

          Have you tries this CSS?

          .gantt {width:100% !important;}

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

    • 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 

      • 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???

      • 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?

        • JitendraZaa

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

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

    • Reshma_jewrani

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

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

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

  • 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

  • subhash

    can we render this to Excel?

    • JitendraZaa

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

  • Shravan

    Hi Jitendra,

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

    Regards,
    Shravan

  • 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?

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

  • Somnath Dash

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

    • JitendraZaa

      Check your Javascript Console, if there is any error…

      • Somnath Dash

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

        Thanks for the help

  • Somnath Dash

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