Gantt Charts in Salesforce Lightning | #SalesforceDevelopment #GanttCharts


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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 

Post a Comment

16 Comments

  1. can i display the table on the left and the chart on the right..?

    ReplyDelete
    Replies
    1. Yes you can do that. Just divide your page in two sections, in first section you can display table on the left and display the chart on the other one.

      Delete
  2. 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). :)

    ReplyDelete
    Replies
    1. To display the Gantt Charts you need some specific parameters in your object like Name, Start Date, End Date etc. It doesn't matter if you are using a custom object, by passing same parameters you can get the same result.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. HI Kapil,

    Appreciate your efforts!!, Do you have a test class for the apex controller.

    ReplyDelete
    Replies
    1. Hi Raj, I am not having test class right now. But I am preparing another article for Gantt Chart that will be launched tomorrow. I will prepare and include my test class in it.

      Delete
    2. Hi Raj, please check the test class below :
      https://www.salesforcebolt.com/2020/09/gantt-chart-with-colorful-bars-Salesforce.html

      Delete
  5. 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

    ReplyDelete
    Replies
    1. Hi Raj,
      Glad to hear that it helped you ! Are you using it in a child page ? If it's working fine in sandbox could you please deploy that VF page separately once and try to run in directly !
      Also let me know if you get any error so we could get specific cause of this issue.

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. 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!

    ReplyDelete
    Replies
    1. Hi there,

      I would suggest you to try to run that VF page as preview first by passing a manual event Id and see if it's working as expected !!

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Thank you, I get the following error: Invalid data table format: column #5 must be of type 'number'.

      Delete
    4. Column number 5 should be a number as it will contain the duration or the time span like days between two dates.

      Delete