Gantt Chart with Colorful Bars 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 : 

GanttChart.vfp
 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<apex:page controller="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(',');
                
                var tstatus = '{!tStatus}';
                tstatus = tstatus.replace("[","");
                tstatus = tstatus.replace("]","");
                var tstatusArr=tstatus.split(',');
                
                function drawChart() {
                    
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Task ID');
                    data.addColumn('string', 'Task Name');
                    data.addColumn('string', 'Resource');
                    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 color='';
                        console.log('###Status :'+tstatusArr[i]);
                        if(tstatusArr[i].trim() == 'Completed'){
                            color='sports';
                        }
                        if(tstatusArr[i].trim() == 'In Progress'){
                            color='winter';
                        }
                        if(tstatusArr[i].trim() == 'Not Started'){
                            color='autumn';
                        }
                        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],color,new Date(sd), new Date(ed), daysToMilliseconds(durationArr[i]),  0,  null]);
                    } 
                    
                    var options = {
                        height: 400,
                        gantt: {
                            trackHeight: 30
                        }
                    };
                    
                    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>


GanttChartCtrl.apxc
 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
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 List<String> tStatus{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>();
        tStatus=new List<String>();
        
        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){
            tStatus.add(ts.Status);
            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);
        }
    }
}


GanttChartCtrlTest.apxc
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@isTest
private class Vlog_GanttChartCtrlTest {
    @testSetup static void setup() {
        Account a = new Account(Name='Sample Account');
        insert a;
        List<Task> tasks = new List<Task>();
        tasks.add(new Task(
            ActivityDate = Date.today().addDays(7),
            Subject='Sample Task',
            WhatId = a.Id,
            OwnerId = UserInfo.getUserId(),
            Status='In Progress'));
        
        insert tasks;
    }
    @isTest static void GanttChartTest(){
        List<Account> accList = [SELECT Id FROM Account limit 1];
        ApexPages.currentPage().getParameters().put('id',accList[0].Id);
        Test.startTest();
        Vlog_GanttChartCtrl obj = new Vlog_GanttChartCtrl();
        Test.stopTest();
    }
}


Checkout below video for output and complete tutorial.

  
  


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

0 Comments