Gantt Charts in Salesforce Lightning | #SalesforceDevelopment #GanttCharts

Kapil July 12, 2020

In this blog you will learn to create Gantt Charts in Salesforce Lightning. We will use Google Gantt Chart script and we will customize it to display Gantt Chart dynamically in our Salesforce Org.

Please follow the code below :

VF Page

<apex:page controller="Vlog_GanttChartCtrl">
     <apex:form >
        
        <html>
            <head>
                <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                <script type="text/javascript">
                    google.charts.load('current', {'packages':['gantt']});
                google.charts.setOnLoadCallback(drawChart);
                function daysToMilliseconds(days) {
                    return days * 24 * 60 * 60 * 1000;
                }
                
                var Name = '{!Name}';
                Name = Name.replace("[","");
                Name = Name.replace("]","");
                var NameArr=Name.split(',');
                
                var startDate = '{!SDate}';
                startDate = startDate.replace("[","");
                startDate = startDate.replace("]","");
                var startDateArr=startDate.split(',');
                
                var endDate = '{!EDate}';
                endDate = endDate.replace("[","");
                endDate = endDate.replace("]","");
                var endDateArr=endDate.split(',');
                
                var duration = '{!Duration}';
                duration = duration.replace("[","");
                duration = duration.replace("]","");
                var durationArr=duration.split(',');
                
                function drawChart() {
                    
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Task ID');
                    data.addColumn('string', 'Task Name');
                    data.addColumn('date', 'Start Date');
                    data.addColumn('date', 'End Date');
                    data.addColumn('number', 'Duration');
                    data.addColumn('number', 'Percent Complete');
                    data.addColumn('string', 'Dependencies');
                    
                    for (var i = 0; i < NameArr.length; i++) {
                        var j=i+1;
                        var sd=startDateArr[i].replace('-',',');
                        sd=sd.replace('-',',');
                        var ed=endDateArr[i].replace('-',',');
                        ed = ed.replace('-',',');
                        data.addRow([NameArr[i], NameArr[i],new Date(sd), new Date(ed), daysToMilliseconds(durationArr[i]),  0,  null]);
                    } 
                    
                    var options = {
                        height: 275
                    };
                    
                    var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
                    
                    chart.draw(data, options);
                }
                </script>
            </head>
            <body>
                
                <div id="chart_div"></div>
            </body>
         </html>
    </apex:form>
</apex:page>

Apex

public class Vlog_GanttChartCtrl {
	public List<String> Name{get;set;}
    public List<String> SDate{get;set;}
    public List<String> EDate{get;set;}
    public List<Integer> Duration{get;set;}
    
    public Vlog_GanttChartCtrl(){
        List<Task> taskList = new List<Task>();
        Name = new List<String>();
        SDate = new List<String>();
        EDate = new List<String>();
        Duration = new List<Integer>();
        
        Integer dd;
        Integer month;
        Integer year;
        
        String whatId=ApexPages.currentPage().getParameters().get('id');
        taskList = [SELECT Id, Subject, CreatedDate, ActivityDate, Status  FROM Task WHERE WhatId=:whatId];     
        for(Task ts:taskList){
            Date todayDate = System.Date.today();
            dd = todayDate.day();
            month=todayDate.month();
            year = todayDate.year();
            Name.add(ts.Subject);
            SDate.add(year+'-'+month+'-'+dd);
            dd = ts.ActivityDate.day();
            month=ts.ActivityDate.month();
            year = ts.ActivityDate.year();
            EDate.add(year+'-'+month+'-'+dd);
            Integer dt = (system.today()).daysBetween(Date.valueOf(ts.ActivityDate));
            Duration.add(dt);
        }
    }
}

Checkout the Vlog also !

If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Keep Coding

16 Comments

UnknownJuly 27, 2020 at 10:51 PM
can i display the table on the left and the chart on the right..?
UnknownAugust 26, 2020 at 9:01 AM
Thanks Kapil!!
I'm trying to have this but for a whole Custom Object and show all the active records (Kind of projects, but they are not projects). :)
RajSeptember 14, 2020 at 3:39 AM
This comment has been removed by the author.
RajSeptember 18, 2020 at 1:52 AM
HI Kapil,

Appreciate your efforts!!, Do you have a test class for the apex controller.
RajNovember 20, 2020 at 6:36 AM
Hi Kapil,

Thanks for all your help, i was already created a gantt chart for my org by following your guide, it was working till last 15 days but suddenly i tried today in productions the page is not showing anything and it is kind of blank , however the page is working correctly on sandboxes do you have any idea on it?

Appreciate your help.

Thanks
CASJanuary 25, 2022 at 12:36 PM
This comment has been removed by the author.
CASJanuary 25, 2022 at 12:37 PM
Hi! I don't know anything about code, but I copied yours and made some minor edits (or what I think are minor edits). I edited it to be for Events, not Tasks. I was trying to add the VF Page to my Event Page Layout but it isn't an option. Am I way out of my league even trying this since I don't know anything about code? Thanks so much!