DHTMLX Docs & Samples Explorer

GanttChart Constructor

    var gantt = new GanttChart();

The constructor itself has no parameters. We have create() method to construct Gantt chart on the page.

    gantt.create(divID);

where

  • divID - id of HTML element which will be used as parent

It is easy to initialize object on page. Just create some div element on your page, it is better if you use absolute or relative style position for it. Then call create() method passign your div ID as an argument. This method will create html Gantt inside of your div. Remember, most of appearance related methods should be called before create(). They are mentioned in API reference in sections “Initialization” and “Appearance”.

<div style="width:950px;height:620px;position:absolute" id="GanttDiv"></div>
<script>
    var gantt = new GanttChart();
    gantt.setImagePath("imgs/");
    gantt.setEditable(true);
    //...
    gantt.addProject(project_1);
    //...
    gantt.create("GanttDiv");
</script>

GanttProjectInfo Constructor

    var project1 = new GanttProjectInfo(id, name, startDate);

where

  • id - id of the project
  • name - name of the project
  • startDate - start date of the project (JavaScript Date object)

Remember: JavaScript Date object counts month part from 0 (January) to 11 (December).
In the sample below the date new Date(2006, 5, 11) is June, 11th of 2006.

    var project1 = new GanttProjectInfo(1, "Applet redesign", new Date(2006, 5, 11));
    gantt.addProject(project1);

GanttTaskInfo Constructor

    var parentTask1 = new GanttTaskInfo(id, name, EST, duration, percentCompleted, predecessorTaskId);

where

  • id - task id
  • name - task name
  • EST- Estimated Start Date of task
  • duration - task duration (in hours)
  • percentCompleted - task percentCompleted in range (0-100)
  • predecessorTaskId - predecessor task Id. Predecessor and this task will be joined by dependency line in the Gantt Chart.
    var parentTask1 = new GanttTaskInfo(1, "Old code review", new Date(2006, 5, 11), 208, 50, "");
    parentTask1.addChildTask(new GanttTaskInfo(2, "Convert to J#", new Date(2006, 5, 11), 100, 40, ""));
    parentTask1.addChildTask(new GanttTaskInfo(13, "Add new functions", new Date(2006, 5, 12), 80, 90, ""));
 
    project1.addTask(parentTask1);