Sign Up ›
  • Akash Saigal 8
  • NEWBIE
  • -1 Points
  • Member since 2017
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
SOLVED
18 replies

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>