function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
jojoforcejojoforce 

Visual Force Page - Java Script Gantt Chart

Hi - 

 

I found this really cool gantt chart, but for some reason I'm having problem embedding it into my Visual Force page. The link of the gantt chart is the following:

 

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

 

I was wondering if anyone can help me figure out what's wrong with the below code? I'm not really getting any error message but the inspect element has "Uncaught TypeError: Cannot call method 'addEventListener' of null". 

 

 

<apex:page >

    <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.css')}"/>
    <script type="text/javascript" language="JavaScript" src="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxcommon.js')}"></script>
    <script type="text/javascript" language="JavaScript" src="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"></script>


    <head>


    <script language="JavaScript" type="text/javascript">
        function createChartControl(htmlDiv1)
        {
            //project 1
            var project1 = new GanttProjectInfo(1, "Applet 11redesign", new Date(2010, 5, 11));
    
            var parentTask1 = new GanttTaskInfo(1, "Old code review", new Date(2010, 5, 11), 208, 50, "");
            parentTask1.addChildTask(new GanttTaskInfo(2, "Convert to J#", new Date(2010, 5, 11), 100, 40, ""));
            parentTask1.addChildTask(new GanttTaskInfo(13, "Add new functions", new Date(2010, 5, 12), 80, 90, ""));
    
            var parentTask2 = new GanttTaskInfo(3, "Hosted Control", new Date(2010, 6, 7), 190, 80, "1");
            var parentTask5 = new GanttTaskInfo(5, "J# interfaces", new Date(2010, 6, 14), 60, 70, "6");
            var parentTask123 = new GanttTaskInfo(123, "use GUIDs", new Date(2010, 6, 14), 60, 70, "");
            parentTask5.addChildTask(parentTask123);
            parentTask2.addChildTask(parentTask5);
            parentTask2.addChildTask(new GanttTaskInfo(6, "Task D", new Date(2010, 6, 10), 30, 80, "14"));
    
            var parentTask4 = new GanttTaskInfo(7, "Unit testing", new Date(2010, 6, 15), 118, 80, "6");
            var parentTask8 = new GanttTaskInfo(8, "core (com)", new Date(2010, 6, 15), 100, 10, "");
            parentTask8.addChildTask(new GanttTaskInfo(55555, "validate uids", new Date(2010, 6, 20), 60, 10, ""));
            parentTask4.addChildTask(parentTask8);
            parentTask4.addChildTask(new GanttTaskInfo(9, "Stress test", new Date(2010, 6, 15), 80, 50, ""));
            parentTask4.addChildTask(new GanttTaskInfo(10, "User interfaces", new Date(2010, 6, 16), 80, 10, ""));
            parentTask2.addChildTask(parentTask4);
    
            parentTask2.addChildTask(new GanttTaskInfo(11, "Testing, QA", new Date(2010, 6, 21), 60, 100, "6"));
            parentTask2.addChildTask(new GanttTaskInfo(12, "Task B (Jim)", new Date(2010, 6, 8), 110, 1, "14"));
            parentTask2.addChildTask(new GanttTaskInfo(14, "Task A", new Date(2010, 6, 7), 8, 10, ""));
            parentTask2.addChildTask(new GanttTaskInfo(15, "Task C", new Date(2010, 6, 9), 110, 90, "14"));
    
            project1.addTask(parentTask1);
            project1.addTask(parentTask2);
    
            //project 2
            var project2 = new GanttProjectInfo(2, "Web Design", new Date(2010, 5, 17));
    
            var parentTask22 = new GanttTaskInfo(62, "Fill HTML pages", new Date(2010, 5, 17), 157, 50, "");
            parentTask22.addChildTask(new GanttTaskInfo(63, "Cut images", new Date(2010, 5, 22), 78, 40, ""));
            parentTask22.addChildTask(new GanttTaskInfo(64, "Manage CSS", null, 90, 90, ""));
            project2.addTask(parentTask22);
    
            var parentTask70 = new GanttTaskInfo(70, "PHP coding", new Date(2010, 5, 18), 120, 10, "");
            parentTask70.addChildTask(new GanttTaskInfo(71, "Purchase D control", new Date(2010, 5, 18), 50, 0, ""));
            project2.addTask(parentTask70);
    
            var ganttChartControl = new GanttChart();
            ganttChartControl.setImagePath("{!URLFOR($Resource.Timeline, 'codebase/imgs/')}");
            
            ganttChartControl.setEditable(true);
            
            ganttChartControl.addProject(project1);
            
            ganttChartControl.create(htmlDiv1);
        }
    </script>
    
    <style>
        body {font-size:12px}
        .{font-family:arial;font-size:12px}
        h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
        xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
        .hdr{
            background-color:lightgrey;
            margin-bottom:10px;
            padding-left:10px;
        }
    </style>

    </head>

    <body onload="createChartControl('GanttDiv');">
        <div style="width:950px;height:620px;position:absolute;" id="GanttDiv"></div>
    </body>



</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
jojoforcejojoforce

I was able to get this to work :)

 

1) Make sure you turn off the following

 

standardStylesheets="false" showHeader="false"

 

2) Use the standard Apex to include javascript &colon;smileyhappy:

 

    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxcommon.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"/>

 

 

Here is the FULL WORKING CODE :)

 

<apex:page standardStylesheets="false" showHeader="false">

    <style>
        body {font-size:12px; background: #F3F3EC; padding-top: 0px;}
        .{font-family:arial;font-size:12px}
        h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
        xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
        .hdr{
            background-color:lightgrey;
            margin-bottom:10px;
            padding-left:10px;
        }
    </style>


    <head>
    <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.css')}"/>

    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxcommon.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"/>

    <script language="JavaScript" type="text/javascript">
        function createChartControl(htmlDiv1)
        {
            //project 1
            var project1 = new GanttProjectInfo(1, "Institutional Sales", new Date(2010, 5, 11));
    
            var parentTask1 = new GanttTaskInfo(1, "IS Planning Timeline", new Date(2010, 5, 11), 208, 100, "");
            parentTask1.addChildTask(new GanttTaskInfo(2, "Plan Development", new Date(2010, 5, 11), 100, 100, ""));
            parentTask1.addChildTask(new GanttTaskInfo(3, "Finalize Your Plan", new Date(2010, 5, 21), 24, 100, ""));
            parentTask1.addChildTask(new GanttTaskInfo(4, "Manager Discussions", new Date(2010, 5, 24), 80, 100, ""));
            parentTask1.addChildTask(new GanttTaskInfo(4, "Final Revisions", new Date(2010, 6, 4), 24, 100, ""));
            
            project1.addTask(parentTask1);

    
            var ganttChartControl = new GanttChart();
            ganttChartControl.setImagePath("{!URLFOR($Resource.Timeline, 'codebase/imgs/')}");
            
            ganttChartControl.setEditable(false);
            
            ganttChartControl.addProject(project1);
            
            ganttChartControl.showTooltip(false);
            ganttChartControl.create(htmlDiv1);
        }
        
        
    </script>
    

    </head>

    <body onload="createChartControl('GanttDiv')">
        <div style="width:100%;height:240px;position:absolute;" id="GanttDiv"></div>
    </body>



</apex:page>

 

All Answers

jojoforcejojoforce

I was able to get this to work :)

 

1) Make sure you turn off the following

 

standardStylesheets="false" showHeader="false"

 

2) Use the standard Apex to include javascript &colon;smileyhappy:

 

    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxcommon.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"/>

 

 

Here is the FULL WORKING CODE :)

 

<apex:page standardStylesheets="false" showHeader="false">

    <style>
        body {font-size:12px; background: #F3F3EC; padding-top: 0px;}
        .{font-family:arial;font-size:12px}
        h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
        xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
        .hdr{
            background-color:lightgrey;
            margin-bottom:10px;
            padding-left:10px;
        }
    </style>


    <head>
    <apex:stylesheet value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.css')}"/>

    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxcommon.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Timeline, 'codebase/dhtmlxgantt.js')}"/>

    <script language="JavaScript" type="text/javascript">
        function createChartControl(htmlDiv1)
        {
            //project 1
            var project1 = new GanttProjectInfo(1, "Institutional Sales", new Date(2010, 5, 11));
    
            var parentTask1 = new GanttTaskInfo(1, "IS Planning Timeline", new Date(2010, 5, 11), 208, 100, "");
            parentTask1.addChildTask(new GanttTaskInfo(2, "Plan Development", new Date(2010, 5, 11), 100, 100, ""));
            parentTask1.addChildTask(new GanttTaskInfo(3, "Finalize Your Plan", new Date(2010, 5, 21), 24, 100, ""));
            parentTask1.addChildTask(new GanttTaskInfo(4, "Manager Discussions", new Date(2010, 5, 24), 80, 100, ""));
            parentTask1.addChildTask(new GanttTaskInfo(4, "Final Revisions", new Date(2010, 6, 4), 24, 100, ""));
            
            project1.addTask(parentTask1);

    
            var ganttChartControl = new GanttChart();
            ganttChartControl.setImagePath("{!URLFOR($Resource.Timeline, 'codebase/imgs/')}");
            
            ganttChartControl.setEditable(false);
            
            ganttChartControl.addProject(project1);
            
            ganttChartControl.showTooltip(false);
            ganttChartControl.create(htmlDiv1);
        }
        
        
    </script>
    

    </head>

    <body onload="createChartControl('GanttDiv')">
        <div style="width:100%;height:240px;position:absolute;" id="GanttDiv"></div>
    </body>



</apex:page>

 

This was selected as the best answer
atifmohdatifmohd

can anyone provide me the static resource file for Timeline for making Gnatt Chart.
jojoforcejojoforce

Its available for download at

 

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml
atifmohdatifmohd

can we define an standard controller fields into it 

 

 

 

<apex:page standardController="Technician_Good_Inventory__c" standardStylesheets="true" showHeader="false" sidebar="false">

<style>
body {font-size:12px; background: #F3F3EC; padding-top: 10px;}
.{font-family:arial;font-size:12px}
h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
.hdr{
background-color:lightgrey;
margin-bottom:10px;
padding-left:10px;
}
</style>


<head>
<apex:stylesheet value="{!URLFOR($Resource.gnatt, 'codebase/dhtmlxgantt.css')}"/>

<apex:includeScript value="{!URLFOR($Resource.gnatt, 'codebase/dhtmlxcommon.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.gnatt, 'codebase/dhtmlxgantt.js')}"/>

<script language="JavaScript" type="text/javascript">
function createChartControl(htmlDiv1)
{
//project 1
var project1 = new GanttProjectInfo(1, "Institutional Sales", new Date(2010, 5, 11));

var parentTask1 = new GanttTaskInfo(1, "IS Planning Timeline", new Date(2010, 5, 11), 208, 100, "");
parentTask1.addChildTask(new GanttTaskInfo(2, "Plan Development", new Date(2010, 5, 11), 100, 100, ""));
parentTask1.addChildTask(new GanttTaskInfo(3, "Finalize Your Plan", new Date(2010, 5, 21), 24, 100, ""));
parentTask1.addChildTask(new GanttTaskInfo(4, "Manager Discussions", new Date(2010, 5, 24), 80, 100, ""));
parentTask1.addChildTask(new GanttTaskInfo(4, "Final Revisions", new Date(2010, 6, 4), 24, 100, ""));

project1.addTask(parentTask1);


var ganttChartControl = new GanttChart();
ganttChartControl.setImagePath("{!URLFOR($Resource.gnatt, 'codebase/imgs/')}");

ganttChartControl.setEditable(false);

ganttChartControl.addProject(project1);

ganttChartControl.showTooltip(false);
ganttChartControl.create(htmlDiv1);
}


</script>

</head>

<body onload="createChartControl('GanttDiv')">
<div style="width:50%;height:200px;position:absolute;" id="GanttDiv"></div>
</body>

 

</apex:page>
atifmohdatifmohd

can we define an standard controller fields into the above code

 

I want to make an gantt chart for the an particular persons with the appropriate assignments of Time Slots

 

 

 
jojoforcejojoforce

Absolutely. You definitely can use a standardController. We did that for the requirement in one of my project. You will have to use javascript or ajax toolkit to pull your data from salesforce and display to your javascript gantt chart. 
T_BET_BE

Hello,

 

thank you for your good code. I want to see with code the header and the sidebar too. If I set the header = "true" then it shows nothing.

 

Can you help me?

 
GriffindorGriffindor
Hi jojoforce,

I am trying to use your code nearly after 4 years and I find some challenges. I see that my current DHTMLX version is Version 3.1. Not sure on what version you wrote this code. I see that I don't have the imgs folder under the codebase. Also, the dhtmlxcommon.js file is residing under Samples folder and not the codebase folder. 

I saw the jquery plugin and viewed the source code in the site, however, the created data is not loading for me. Could you please help?

Please see my screenshot below -

User-added image

I see that you are instantiating GanttChart() and calling some predefined functions but I don't understand these. Could you please post a workable solution with the current plugin version?
Kevin LanguedocKevin Languedoc
I added the code jojoforce into a Visualforce page and I have added the zip file of the dhtmlx gantt component but nothing appears on screen and I'm not getting any errors. I figure that is the way that I have setup the Static Resource. Can anyone provide instructions on the proper way to upload this Gantt component into Static Resources.

Thanks
 
aasif.sfdc1.3901615428454663E12aasif.sfdc1.3901615428454663E12
I have followed Steps m getting blank screen can any help me out how to resolve this?? 
Kevin LanguedocKevin Languedoc
1) You have to upload the complete zip as a static resource from dhtmlx. Name it Gantt for instance. This zip will contain both the javascript and css for gantt chart
2) Reference the resource like below
  
<apex:page standardController="Delivrable__c" 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, text:"Project #2", 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>

 
Rafael Delgado 9Rafael Delgado 9
Is there a way to make this Gantt chart to record the changes in Salesforce?
I would like to be able to modify the name of the project and add tasks directly from the Gantt chart, and reflect those changes in my custom objects in Salesforce, the same with the dates, modify the dates in the Gantt chart and have those changes reflected in my projects or tasks in Salesforce.
Teodor JanssonTeodor Jansson
Im working with integrating Ganttchart into a Skuidpage and would like to have an answer to "@Rafael Delgado 9" question. That would really help me with alot. 
Chris SecristChris Secrist
Can someone offer support how to to get the data from standard controller into the Gantt chart.  Only was able to generate a standard controller to show the info I am looking for.  Would like to put this in the gantt chart.  Have a VFP with standard controller, loaded the gantt as static resource.  Any support would be great.  New to coding and just struggling through currently.
 
John Wessel 9John Wessel 9
Anybody still working on this? I am able to get the gantt chart working, but the save opperation doesn't work. Where is salesforce could data be persisted for something like this? I assume it has to be mapped somewhere...
Akash Saigal 8Akash Saigal 8
I am looking for a similar development where i want the changes made on Gnatt chart to reflect on the records in Salesforce? Is this even posible?
David Roberts 4David Roberts 4
see https://developer.salesforce.com/forums/?id=906F0000000BaMRIA0
SFSkumarSFSkumar
Hi, how we can create a burndown chart for sprint with VF page and controller?