1

I have a requirement to show Projects and its related sub tasks using Gantt chart in Salesforce. I have used DHTMLX as my base source.

Here is my logic:

<apex:page standardController="Project__c" standardStylesheets="false" showHeader="false">
    <head>
    <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Timeline, '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">
        var tasks =  {
            data:[
                {id:1, text:"Project", start_date:"01-04-2013", duration:18,order:10,
                    progress:0.4, open: true},
                {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8, order:10,
                    progress:0.6, parent:1},
                {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8, order:20,
                    progress:0.6, parent:1}
            ],
                    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>

and here is my Visualization:

Gantt Chart

Now, in the above logic, I have hard-coded Task 1 and Task 2, but is there any way I can make these Project and its sub tasks dynamic?

Parent: Project__c Child: Task__c

Can anyone please suggest on how to do so?

Improve this question

1 Answer 1

Reset to default
1

Just to give you an idea and starter, but i know this can be improved in many ways. Hope the below code helps!

<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>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .