+ Start a Discussion
Chris SecristChris Secrist 

Gantt charts and cases

I am attempting to use the dhtmlx gantt chart in salesforce.  Currently I am trying to display all cases from all accounts that meet certain critieria.  Then I would like to use those cases and associated dates in a field to populate Gantt chart.  Looking for any assistance possible.  I cannot get a visualforce page to show any case information when I use a basic controller.

<apex:page standardController="Case" >
    <apex:form >
        <apex:pageBlock >  
            <apex:pageMessages />
            <apex:pageBlockButtons> 
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>
              <apex:PageBlockTable value="{!Case}" var="c">
                <apex:column value="{!c.Account}"/>
                  <apex:column value="{!c.Number}"/>
                <apex:column value="{!c.Owner}"/>
                <apex:column headerValue="Install Date">
                    <apex:inputField value="{!a.Planned_Install_Date__c}"/>
                </apex:column>
            </apex:PageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Chris SecristChris Secrist
I am able to use the standard controller to put the info in a table, how would I go about getting the data from the table into the gantt chart?

<apex:page standardController="Case" standardStylesheets="false" showHeader="false">
    <head>
    <apex:stylesheet value="{!URLFOR($Resource.Gantt, 'codebase/dhtmlxgantt.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.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">
        var tasks =  {
            data:[
                {id:1, title="c.Account.Name", Planned_Install_Date__c, 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"},
elyb527elyb527
Did you ever get this working?  If so would you share?  Thanks
David Roberts 4David Roberts 4
I got it working (to my amazement) in Lightning.
It therefore runs in a harness.app, as a page component and on a mobile device.
I've added the framework for getting data from SF but not actually used it in this example.
I just got some dummy tasks but any custom object could be used.
I'm struggling with the formatting around the <div> and am now learning what functionality the dhtml offers.
Any guidance would be appreciated.
I'll also post this to their chat site: https://forum.dhtmlx.com/t/gantt-and-salesforce-visualforce-page/36899
Code to follow...
David Roberts 4David Roberts 4
Project Resources Bundle, Controller and Test:
Resource dhtml is zip file with dhtmlxgantt.css and dhtmlxgantt.js
Component:
<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes"
                controller="ProjectResourcesController"
                access="global" >
 
 
 <!--<ltng:require> styles = "{!$Resource.dhtml + '/dhtmlxgantt.css'}" />--> <!-- need to work on this syntax -->
    <ltng:require styles="/resource/dhtml/dhtmlxgantt.css" /> 
    <ltng:require scripts="{!$Resource.dhtml + '/dhtmlxgantt.js'}"  afterScriptsLoaded="{!c.initGantt}" />   
 
    <aura:attribute name="SendMessage" type="String" default = "This is ProjectResources"/>
 
    <style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }  
               </style>
  
    <div id="gantt_here" style='width:100%; height:500px;'></div>
 
</aura:component>
Controller:
({
      
 
    initGantt : function(component, event, helper) {
       
        // Calling server-action to get the data
        var action = component.get("c.getData");
 
        // Create a callback that is executed after
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state == "SUCCESS") {
                let data = response.getReturnValue();
                console.log('got data='+data);
                // Render the returned data --- to be completed
                //
                //helper call has to be here else gantt is not defined.
                //if first line of this method, doesn't work
                //don't know why!
                helper.drawAGantt(component);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
               
                 if (errors) {
                     console.log("Error message: " + errors);
                    
                } else {
                    console.log("Unknown error");
                }
               
            }
        });
 
        $A.enqueueAction(action);
 
    }//initGantt
 
})
 
Helper:
({
 
    drawAGantt : function( component ) {
       
        /* see following threads about this...
        https://forum.dhtmlx.com/t/gantt-and-salesforce-visualforce-page/36899
        https://forum.dhtmlx.com/t/pars-data-from-apex-class-to-apex-page/33644/4
        https://developer.salesforce.com/forums/?id=906F0000000BaMRIA0
        https://developer.salesforce.com/forums/?id=906F000000097EkIAI
        */
       
        
        
        var tasks =  {
            data:[
                {id:1, text:"Project #1", start_date:"01-04-2018", duration:18,order:10,
                    progress:0.4, open: true},
                {id:2, text:"Task #1",    start_date:"02-04-2018", duration:8, order:10,
                    progress:0.6, parent:1},
                {id:3, text:"Task #2",    start_date:"11-04-2018", 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_here').gantt.init();
        gantt.init("gantt_here");
                              gantt.parse(tasks);
       
    }//drawAGantt
})
 
 
 
 
public class ProjectResourcesController {
   
    @AuraEnabled
    public static List<Task> getData(){
      
        // For this example, dummy data to show framework
        // but use query etc...
        List<Task> lstData = new List<Task>();
        lstData.add( new Task( ActivityDate = Date.valueOf('2018-09-01T13:00:00z'), Subject = 'Task1') );
        lstData.add( new Task( ActivityDate = Date.valueOf('2019-04-01T17:00:00z'), Subject = 'Task2') );
       
        return lstData;
    }
 
}//ProjectResourcesController
@isTest(seeAllData=true)
private class TestProjectResources
{
    static testMethod void TestProjectResources()
    {      
        Test.startTest();       
        ProjectResourcesController tData = new ProjectResourcesController();
        List<Task> lstPies = ProjectResourcesController.getData();        
        Test.stopTest();
    }
}//TestProjectResources

Harness:
<aura:application access="GLOBAL" extends="force:slds">
   
        <c:ProjectResources/>
              
</aura:application>

 
Praveen K 84Praveen K 84
Failed to save ganttcomponent.cmp: Markup for markup://c:ganttcomponent may not contain a <style> tag: Source

hi i am getting this error while saving the component..can any one help me
 
David Roberts 4David Roberts 4
Hi Praveen, You need to check the field names. If you are using the development console, you can open the object (Case) to see the field names. Here’s the corrected code: