Working with Data

Loading Data

Webix Gantt expects a common URL for loading and saving tasks and links:

view:"gantt", url:"remote/data"

More information on routes and parameters is located in the Working with Server article.

If you do not have a backend server or require non-standard logic, you can customize the Backend service.

Data Structure

You can find data strucutres of resources, categories, assignments and learn how to work with them on the client here.

Tasks

Gantt expects JSON data where each element of the array is an object with the following fields:

id (string) - task ID
type (string) - element type with the following values possible:
- "task" (default) - marks element as a task
- "project" - marks element as a project
- "milestone" - marks element as a milestone
- "split" - marks element as split, if splitting tasks is enabled.
start_date (object | string) - task start date
planned_start - planned task start date, if baseline is enabled.
end_date (object | string) - task end date
planned_end - planned task end date, if baseline is enabled.
text (string) - text of the task
progress (number) - progress of the task (from 0 to 100)
parent (number) - ID of the parent project (0 if it's the root)
position (number) - task position in the branch
duration (number) - duration of the task in days
planned_duration - planned duration of the task in days, if baseline is enabled.
details (string) - notes about the task
open (number) - defines whether the parent branch is opened or not (0 or 1).

JSON example

[
  {
    "text":"Project A","start_date":"2018-06-13 00:00:00",
    "duration":"1","parent":"0","progress":0.5,"open":1,
    "notes":"Weekly meeting required", "type": "project",
    "end_date":"2018-06-14 00:00:00","id":"1","planned_start": "2018-06-13 00:00:00",
        "planned_duration": 2,"planned_end": "2018-06-15 00:00:00"
  },
  // other tasks
]

Links

Gantt expects JSON data where each element of the array is an object with the following fields:

source (number) - ID of the source task (where the link comes from)
target (number) - ID of the target task (where the link comes to)
type (number) - type of the link with the following values possible:
- 0 - from end to start
- 1 - from start to start
- 2 - from end to end
- 3 - from start to end.

JSON example

[
  {"source":"1.2","target":"2","type":1},
  // other links
]

Data Services

Gantt has the following services for data:

1. Local Data

stores data on the client side in Data Collections
provides methods for getting and repainting the data
provides methods for getting and repainting the scales

const local = $$("gantt").getService("local");
const scales = local.getScales(); //returns current scales settings

2. Operations

provides methods for adding/removing/updating tasks and links

const ops = $$("gantt").getService("operations");
ops.addTask(obj, index, parent); // adds a new task

3. Helpers

provides methods and properties to work with resources

const helpers = $$("gantt").getService("helpers");
// provide a template for a resource avatar
helpers.resourceAvatar(resource, cssClass, withTooltip);

4. Grouping

provides methods for grouping Tasks View, Resource View, and Resource Diagram

5. Backend

provides methods for issuing requests to the backend to fetch data and save the changes back

const back = $$("gantt").getService("backend");
back.tasks().then((data) => console.log(data));

Study the models folder in the source code for method signatures.

Data Operations

Getting tasks

All the tasks are stored in a TreeCollection. The collection is accessible via the tasks() method of the Local Data service.

const tasks = $$("gantt").getService("local").tasks();

To make sure that the data are already loaded, use the waitData method to wait for a data promise.

Getting a particular task

const tasks = $$("gantt").getService("local").tasks(); 
tasks.waitData.then(function(){
   tasks.getItem(tasks.getFirstId()); // get first task
});

You can get an array of all tasks by serializing the collection:

Serializing tasks collection

const tasks = $$("gantt").getService("local").tasks(); 
tasks.waitData.then(function(){
   const arr = tasks.serialize();  // get an array of tasks
   /*[
        {
         "text":"Task A1","start_date":"2018-06-12 00:00:00",
         "duration":"2","progress":31,"parent":"1",
         "notes":"Contact Rob for details", "type": "task",
         "end_date":"2018-06-14 00:00:00","id":"1.1"
        },
      // ...
    ]*/
});

Getting links

All the links are stored in a DataCollection. The collection is accessible via the links() method of the Local Data service.

const links = $$("gantt").getService("local").links();

To make sure that the data are already loaded, use the waitData method to wait for a data promise.

Getting a particular link

const links = $$("gantt").getService("local").links(); 
links.waitData.then(function(){
   links.getItem(links.getFirstId()); // get first link
});

You can get an array of all links by serializing the collection:

Serializing links collection

const links = $$("gantt").getService("local").links(); 
links.waitData.then(function(){
   const arr = links.serialize(); // get an array of links
   /*[
        {"source":"1.2","target":"2","type":1},
        ...
   ]*/
});

Getting links of a particular task

You can get links coming out or into a particular task by calling the getLinks() method of the Local Data service. It accepts 2 parameters:

id (number, string) - ID of the task you want to get a link from
type (string) - type of the desired link ("source" or "target").

Serializing outcoming links of a particular task

const link = $$("gantt").getService("local").getLinks(1.2, "source");

Related sample: Gantt: Data Operations

The method returns an object with the following fields:

id (string) - ID of the linked task
text (string) - text of the linked task
ttype (string) - type of the link, "source" or "target"
type (string) - type of the link, "0", "1", "2" or "3".

JSON example

{
  id: "5", text: "Project B",
  ttype: "source", type: "1"
}

Clearing data

You can call clearAll to clear all collections.

$$("$gantt").clearAll();

Reloading data

To clear data and reload it, call reload.

$$("$gantt").reload();

You can also reload all collections manually after calling clearAll.