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:
Download Complete Source code for Gantt Chart in Salesforce with Static resources
Leave a Reply