Skip to main content

How to Create Manual Round Robin ID in Salesforce

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 

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

Post a Comment

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
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<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials

Hello folks,
In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 
Prerequisite : 
Create a custom object WhatsApp__c
Create custom fields as shown below : 


Please follow the code below : 

WhatsAppComponent 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<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action="{!c.doInit}"value="{!this}"/><articleclass="slds-card"><divclass="slds-card__header…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …