Gantt Chart Integration

This page shows an example on how to embed dhtmlx-gantt chart on Visualforce page. Using the same approach, we can embed on AURA and LWC components as well.

Download open source JavaScript Gantt chart javascript libraries from the below link:

https://github.com/DHTMLX/gantt/tree/master/codebase

More examples on Gantt chart can be found in the below link:

https://www.npmjs.com/package/dhtmlx-gantt

Static Resource:

Upload the git repository cloned from above link into your Salesforce org.

Visualforce Page:

<apex:page standardController="Opportunity" standardStylesheets="false" showHeader="false">
    <head>
        <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'gantt/codebase/dhtmlxgantt.css')}"/>
        <apex:includeScript value="{!URLFOR($Resource.Timeline, 'gantt/codebase/dhtmlxgantt.js')}"/>
        <style type="text/css" media="screen">
            html, body { margin:0px; padding:0px; height:100%; overflow:hidden; }
        </style>
    </head>
    
    <body>
        <div id="gantt_here" style='width:100%; height:100%;'></div>
        <script type="text/javascript">
                
            let ganttDataArr = [];
        
        	for(let newParntObj=1; newParntObj < 5; newParntObj++ ) {
                let ganttDataObj = {};
                ganttDataObj["id"] = newParntObj;
                ganttDataObj["text"] = "Project"+newParntObj;
                ganttDataObj["start_date"] = "01-04-2013";
                ganttDataObj["duration"] = newParntObj*3;
                ganttDataObj["order"] = "10";
                ganttDataObj["progress"] = "0.6";
                ganttDataObj["open"] = true;
                ganttDataArr.push(ganttDataObj);
            }
        
            for(let newObj = ganttDataArr.length+1; newObj < 10; ++newObj ) {
                let ganttDataObj = {};
                ganttDataObj["id"] = newObj;
                ganttDataObj["text"] = "Task #"+newObj;
                ganttDataObj["start_date"] = "01-04-2013";
                ganttDataObj["duration"] = newObj*2;
                ganttDataObj["order"] = '10';
                ganttDataObj["progress"] = newObj%2;
                ganttDataObj["parent"] = '1';
                ganttDataArr.push(ganttDataObj);
            }

            let tasks =  {
                data: ganttDataArr,
                links:[
                    { id:1, source:1, target:2, type:"1"},
                    { id:2, source:2, target:3, type:"0"},
                    { id:3, source:3, target:4, type:"0"},
                    { id:4, source:2, target:5, type:"2"},
                ]
            };
                    
            gantt.init("gantt_here");
            gantt.parse(tasks);
                    
		</script>        
    </body>
</apex:page>

In the above code, we do imple dynamic creation of Project and task under the project (not too fancy, but dynamic).

Published by Sunil Madana

Passionate about Salesforce Platform with 4+ Years of experience as Administrator, Developer and Consultant. Happy to share my experiences with all. Worked for different industries types and have working knowledge on building complex and generic lightning components. #trailheadlover and always love to try new features released on Salesforce platform and helps others with the same.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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