Project Chart

Overview

Project Gantt Chart is intended for showing a progress of completion of a single task or a group of tasks, taking into consideration their planned and actual time periods, along with a progress made, tasks hierarchy and order.

Chart

To create JavaScript Project Gantt Chart you should use the ganttProject() method.

// chart type
chart = anychart.ganttProject();

Here is a simple sample to illustrate how to create a project chart:

Playground

Hierarchy

Tree data model is used in Project Gantt Charts to define a data hierarchy. It can be set in two ways: by table and by structure. In both samples below node "first" is the parent of node "second".

// hierarchy 1 by table

  {
    'id': 1,
    'name': 'first',
    'actualStart': Date.UTC(2010, 0, 17, 8),
    'actualEnd': Date.UTC(2010, 1, 5, 18),
  },
  {
    'id': 2,
    'parent': 1,
    'name': 'second',
    'actualStart': Date.UTC(2010, 0, 17, 8),
    'actualEnd': Date.UTC(2010, 0, 25, 12)
  }
// hierarchy 2 by structure

 {
    "name": "first",
    "actualStart": Date.UTC(2007, 0, 25),
    "actualEnd": Date.UTC(2007, 2, 14),
    "children": [
      {
        "name": "second",
        "actualStart": Date.UTC(2007, 0, 25),
        "actualEnd": Date.UTC(2007, 1, 3)
      }
    ]
 }

Read more about handling tree data at: Tree Data Model section.

Tasks Types

There are following types of tasks in Project Gantt Chart: Normal, Parent and Milestone.

Type Description
Normal This is a task that has start time, end time, and doesn't include any other tasks (isn't a parent of any other task).
Parent This is a task that has both start and end time and also has some tasks inside it (is a "parent" of some tasks)
Milestone It is some sort or waypoint that indicates some major event. Its start time is always equal to its end time.

The tasks types are not explicitly defined but task of each type behaves differently.

// how to create the tasks
data = [
{
  "name": "parent",
  "actualStart": Date.UTC(2007, 0, 25),
  "actualEnd": Date.UTC(2007, 2, 14),
  "children": [
    {
      "name": "first child",
      "actualStart": Date.UTC(2007, 0, 25),
      "actualEnd": Date.UTC(2007, 1, 3)
    },
    {
      "name": "second child",
      "actualStart": Date.UTC(2007, 1, 4),
      "actualEnd": Date.UTC(2007, 1, 4)
    },
    {
      "name": "milestone",
      "actualStart": Date.UTC(2007, 1, 4),
      "actualEnd": Date.UTC(2007, 1, 24)
    }
  ]
}
];

Playground

Expand/Collapse control

You can control if the summary task is expanded or collapsed using these methods:

Method Description
expandAll() Allows to expand all tasks.
collapseAll() Used to collapse all tasks.
expandTask(taskID) Expands one task.
collapseTask(taskID) Collapses one task.

Playground

Task Progress

Tracking progress can be complicated, but you can show the percent complete using a progress bar. To use it you need to provide the required value of the "progressValue".

// progress in data
{
    "name": "research",
    "actualStart": Date.UTC(2009, 1, 4),
    "actualEnd": Date.UTC(2009, 2, 4),
    "progressValue": '13%'
}

Playground

Note that in the sample above we have changed progress bar color for one of the tasks, that's how one can do this:

    {
      'id': '4',
      'name': 'Task 4',
      'actualStart': Date.UTC(2008, 7, 5),
      'actualEnd': Date.UTC(2008, 7, 14),
      'progressValue': '25%',
      'progress':{'fill': 'red'}
    }

Actual and Planned

Sometimes a task is taking longer than was planned, in this case it is useful to use additional bars to display planned vs actual. Actual progress is shown as the upper bar and planned - as the lower.

// planned and actual in data
{
    'name': "revision",
    'actualStart': Date.UTC(2010, 5, 1, 8),
    'actualEnd': Date.UTC(2010, 5, 24, 18),
    'baselineStart': Date.UTC(2010, 4, 29, 9),
    'baselineEnd': Date.UTC(2010, 5, 27, 18),
}

Playground

To configure how actual or baseline bar looks like you need to set the "fill" value in appropriate properties.

// planned and actual in data
{
    'name': "revision",
    'actualStart': Date.UTC(2010, 5, 1, 8),
    'actualEnd': Date.UTC(2010, 5, 24, 18),
    'actual':
        {
            'fill':
            {
                'keys': ['orange', 'red'],
                'angle': 0
            },
        },
    'baselineStart': Date.UTC(2010, 4, 29, 9),
    'baselineEnd': Date.UTC(2010, 5, 27, 18),
    'baseline':
        {
            'stroke': '3 black',
            'fill': {'color': 'gray'}
        }
}

Swap Actual and Planned

If you want to display Planned (baseline) bars above the Actual bars, use the above() method of the Timeline baselines:

chart.getTimeline().baselines().above(true);

This is how it works:

Playground

Connectors

If there is a need to add an additional connection between tasks, you can define connectors with these settings: connectorType. It can belong be one of four types: "start-start", "start-finish", "finish-start", "finish-finish".

(taskID connectTo) defines another node which will be connected with the first.

Types of task connectors:

Type Description
start-start The second can’t start until the first task starts
start-finish The second task can’t finish until the first begins.
finish-start The second task can’t start until the first is done.
finish-finish The second task can’t finish until the first task is done.

// connectors in data
{
    "id": "4",
    "name": "resolution",
    parent:"2",
    "actualStart": Date.UTC(2010, 4, 29, 9),
    "actualEnd": Date.UTC(2010, 5, 12, 11),
    "connectTo": "5",
    "connectorType": "finish-start"
}

Playground

AnyChart JavaScript framework give you an opportunity to describe how connector should be displayed. If you want to customize the connector view you should set the "fill" and "stroke" parameters in "connector", where "stroke" defines a color of connector line and "fill" defines the color of connector arrow.

'connector': {
    'stroke': {color: '#3300CC .2'},
    'fill': {'color': '6600CC .5'}
}

In the sample below we have a Gantt Chart with simple data and we'll color each connector to different color. Here is the sample:

Playground