{"id":2817,"date":"2012-04-18T01:00:40","date_gmt":"2012-04-17T19:30:40","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2817"},"modified":"2012-04-18T01:00:40","modified_gmt":"2012-04-17T19:30:40","slug":"gantt-chart-in-salesforce-using-jquery-and-json","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gantt-chart-in-salesforce-using-jquery-and-json\/","title":{"rendered":"Gantt Chart in Salesforce using JQuery and JSON"},"content":{"rendered":"

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”.<\/p>\n

In this article, i will\u00a0delineate\u00a0creating the “Gantt Chart<\/strong>” using JQuery and JSON. In previous article<\/a><\/strong> 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”.<\/p>\n

What is Gantt Chart?<\/strong><\/p>\n

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.<\/p>\n

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<\/a>.<\/p>\n

Plugin uses following JSON format :<\/p>\n

\n[{  "name"  : "Task#1"\n  , "desc"  : " Task Desc"\n  , "values": [\n      {  "from"       : "\/Date(1296547200000)\/"\n       , "to"         : "\/Date(1296554400000)\/"\n       , "desc"       : "<b>Task #1<br>"\n       , "customClass": "ganttRed" (optional)\n       , "label"      : "Task #1" (optional)\n      },\n      {  "from"       : "\/Date(1296637200000)\/"\n       , "to"         : "\/Date(1296649800000)\/"\n       , "desc": "<b>Task #<\/b>"\n       , "customClass": "ganttOrange" (optional)\n       , "label": "Task #1" (optional)\n      }\n  ]\n },\n ...\n]\n<\/pre>\n
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.<\/p>\n
I have added the Static Resource<\/strong> of name “GanttChart” which includes the jQuery and jQuery plugin to draw the Gantt Chart.<\/p>\n
Download Complete Source code for Gantt Chart in Salesforce with Static resources<\/a><\/p>\n
following visualforce page renders the Grantt chart on the basis of JSON passed:<\/p>\n
\n<apex:page standardStylesheets="false" sidebar="false">\n\n<apex:stylesheet value="{!URLFOR($Resource.GanttChart, 'style.css')}"\/>\n<apex:includeScript value="{!URLFOR($Resource.GanttChart, 'js\/jquery-1.5.1.min.js')}"\/>\n<apex:includeScript value="{!URLFOR($Resource.GanttChart, 'js\/jquery.fn.gantt.js')}"\/>\n\n<div class="gantt" \/>\n\n<script type="text\/javascript">\n\n$gc = jQuery.noConflict();\n\nfunction getHostName()\n{\n    var p = $gc(location).attr('href');\n    pathArray = p.split( '\/' );\n    var protocol = pathArray[0];\n    var host = pathArray[2];\n    return protocol+'\/\/'+host;\n}\n\n\tvar jsonDataURL = getHostName()+'\/apex\/GanttChartData?core.apexpages.devmode.url=0';\n\n\t$gc(function () {\n     \t$gc(".gantt").gantt({source: jsonDataURL, navigate: 'scroll', scale: 'hours', maxScale: 'hours', minScale: 'hours', hollydays: ["\/Date(1293836400000)\/"]});\n     });\n\n<\/script>\n\n<\/apex:page>\n<\/pre>\n
Gantt Chart will be rendered in div tag having class name as “gantt<\/strong>“.<\/p>\n
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.<\/p>\n
Refer this API for Datetime methods of the Salesforce<\/a><\/p>\n
The output will look like:<\/p>\n
\"Gantt<\/a>
Gantt Chart in Salesforce<\/figcaption><\/figure>\n
Download Complete Source code for Gantt Chart in Salesforce with Static resources<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial and Example of creating the Gantt Chart in Salesforce using JQuery and JSON<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,9,18],"tags":[134,136,331],"class_list":["post-2817","post","type-post","status-publish","format-standard","hentry","category-apex","category-salesforce","category-visualforce","tag-jquery","tag-json","tag-salesforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":2817,"position":0},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":2817,"position":1},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":2817,"position":2},"title":"Salesforce Lightning Component – Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3649,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/client-side-templating-using-underscore-js-and-jquery\/","url_meta":{"origin":2817,"position":3},"title":"Client side Templating using Underscore.js and JQuery","author":"Jitendra","date":"January 2, 2014","format":false,"excerpt":"Recently, I ran into requirement where I was getting JSON response and needed to render it on my Mobile application. I had two Options, Server side processing and Client side Templating. I studied and checked both way ; came to conclusion on using Client side Templating. There are many plugins\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Underscore.js","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/01\/Underscore-js.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2843,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/streaming-api-using-jquery-salesforce\/","url_meta":{"origin":2817,"position":4},"title":"Streaming API Using JQuery – Salesforce","author":"Jitendra","date":"May 6, 2012","format":false,"excerpt":"Tutorial of Streaming API in Salesforce with Source code and Demo Video - Implementation of Bayeux protocol and CometD using JQuery and JSON","rel":"","context":"In "Tech Tips"","block_context":{"text":"Tech Tips","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/tips\/"},"img":{"alt_text":"Salesforce Streaming API - Create Push topic","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2808,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/json-output-in-visualforce\/","url_meta":{"origin":2817,"position":5},"title":"JSON output in Visualforce","author":"Jitendra","date":"April 18, 2012","format":false,"excerpt":"The Example of generating the JSON Output in Visualforce page using JSON.serialize method provided by Salesforce","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Visualforce page output as JSON","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2817"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2817\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}