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.