dojox.gantt ¶

since:	V1.6

dojox.gantt gives the capability of project management.

Contents

dojox.gantt

Introduction ¶

GanttChart(dojox.gantt.GanttChart) is an integrated widget for project and resource management. It includes a set of feature as follows.

Toolbar - Providing general time line control and save/load button.

Project Tree - Listing projects and their tasks.

Task Cascade View - A task view with dependency, that can be modified visually.

Resource View - A read-only view shows people resource occupation.

Usage ¶

The following step shows how to create a typical gantt chart in dojo.

setTimeout(function(){
require(["dojo","dojox/gantt/GanttChart", "dojox/gantt/GanttProjectItem", "dojox/gantt/GanttTaskItem"],function(dojo, GanttChart, GanttProjectItem, GanttTaskItem){
  // Declare gantt chart.
  var ganttChart = new GanttChart({
    readOnly: false,        // optional: determine if gantt chart is editable
    dataFilePath: "gantt_default.json",    // optional: json data file path for load and save, default is "gantt_default.json"
    height: 400,            // optional: chart height in pixel, default is 400px
    width: 1200,            // optional: chart width in pixel, default is 600px
    withResource: true      // optional: display the resource chart or not
  }, "gantt");              //"gantt" is the node container id of gantt chart widget

  // Add project with tasks.

  var project = new GanttProjectItem({
    id: 1,
    name: "Development Project",
    startDate: new Date(2006, 5, 11)
  });
  var taskRequirement = new GanttTaskItem({
    id: 1,
    name: "Requirement",
    startTime: new Date(2006, 5, 11),
    duration: 50,
    percentage: 50,
    taskOwner: "Jack"
  });
  var taskAnalysis = new GanttTaskItem({
    id: 2,
    name: "Analysis",
    startTime: new Date(2006, 5, 18),
    duration: 40,
    percentage: 0,
    previousTaskId: "1",
    taskOwner: "Michael"
  });

  project.addTask(taskRequirement);
  project.addTask(taskAnalysis);

  ganttChart.addProject(project);

  // Initialize and Render
  ganttChart.init();
});
},0);

setTimeout(function(){
require(["dojo","dojox/gantt/GanttChart", "dojox/gantt/GanttProjectItem", "dojox/gantt/GanttTaskItem"],function(dojo, GanttChart, GanttProjectItem, GanttTaskItem){
  // Declare gantt chart.
  var ganttChart = new GanttChart({
    readOnly: false,        // optional: determine if gantt chart is editable
    dataFilePath: "gantt_default.json",    // optional: json data file path for load and save, default is "gantt_default.json"
    height: 400,            // optional: chart height in pixel, default is 400px
    width: 1200,            // optional: chart width in pixel, default is 600px
    withResource: true      // optional: display the resource chart or not
  }, "gantt");              //"gantt" is the node container id of gantt chart widget

// Add project with tasks.

project.addTask(taskRequirement);
  project.addTask(taskAnalysis);

ganttChart.addProject(project);

// Initialize and Render
  ganttChart.init();
});
},0);

<div id="gantt"></div>

@import "{{baseUrl}}dojox/gantt/resources/gantt.css";

There are several imported parameters in dojox.gantt.GanttTaskItem declaration as follows.

Name	Type	Default	Description
duration	number	8	Task duration in hours.
percentage	number	0	Task progress in percentage, 50 for 50%.
previousTaskId	number\|string	null	The id of previous task.