Still have questions?
Contact support
You are looking at an outdated 7.11.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

Resource Chart


JavaScript Resources Gantt Chart is one of two types of Gantt Charts. It is intended for showing the resources you have and spreading these resources along the timeline (into periods). Resources can be servers, equipment, vacancies of employees, expendable materials, or anything else.


The JS Resource Gantt Chart creation is the same as JS Project Chart except you should define the resource chat type using the ganttResource() method:

//create resource gantt chart
  chart = anychart.ganttResource();

Here is a sample demonstrates how to create simple Project Chart.

JsFiddle Playground


Also there is an ability to expand resources using parent property.

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

Let's demonstrate these possibilities with some sample code:

JsFiddle Playground


As shown above every resource has a set of its own properties:

 "id": "1",
 "name": "main server",
 "periods": [..]

Each period has the id, name, start and end time.

 "periods": [
        {"id": "1_1", "start": Date.UTC(2013, 1, 20), "end": Date.UTC(2013, 3, 2)}},
        {"id": "1_2", "start": Date.UTC(2013, 3, 2), "end": Date.UTC(2013, 4, 5)}}

Also you can define the view of the given period:

//solid fill
{"fill": "#FFFF00 0.7", "stroke": "none"},

//gradient fill
{"fill": {"angle": 0, "keys": [{"color": "orange", "position": 0}, {"color": "#6B9866", "position": 0.5}, {"color": "red", "position": 1}]}},

JsFiddle Playground

You may have some tasks that are associated with another task, for this purpose it is possible to use the "parent" property:

//the first resource is the parent of the second
       "name": "first",
       "name": "second",
       "parent": "main",
       "periods": [
         {"id": "2_1", "start": Date.UTC(2012, 4, 25), "end": Date.UTC(2012, 4, 29)},
         {"id": "2_2", "start": Date.UTC(2012, 6, 25), "end": Date.UTC(2012, 7, 5)}