html5 gantt task hierarchy

Gantt tasks can be arranged in a hierarchy.

You can create the hierarchy by specifying children for each task.

The parent tasks will be automatically treated as task groups (see Gantt task types).

The end-user can modify the hierarchy using drag and drop row moving.

JavaScript Example

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

<script>
  // create DayPilot.Gantt object, bind it to the placeholder div
  var gantt = DayPilot.Gantt("gantt");

  // configure
  gantt.tasks.list = [
    {
      id: "G1",
      text: "Group 1",
      children: [
        {
          start: "2014-10-01",
          end: "2014-10-03",
          id: "1",
          text: "Task 1"
        },
        {
          start: "2014-10-03",
          end: "2014-10-05",
          id: "2",
          text: "Task 2"
        }    
      ]
    }    
  ];

  // initialize and render the Gantt chart
  gantt.init();
</script>