Working with Data

Loading Data

Webix Gantt is a backend-oriented component and expects data loaded by URL:

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

Data Structure

Tasks

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

id (string) - task ID;
start_date (object) - task start date;
end_date (object) - task end date;
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);
duration (number) - duration of the task in days;
notes (string) - notes about the task;
open (boolean) - defines wether the parent branch is opened or not.

JSON example

[
  {
    "text":"Project A","start_date":"2018-06-13 00:00:00",
    "duration":"1","parent":"0","progress":0.5,"open":true,
    "notes":"Weekly meeting required",
    "end_date":"2018-06-14 00:00:00","id":"1"
  },
 
  {
    "text":"Task A1","start_date":"2018-06-12 00:00:00",
    "duration":"2","progress":31,"parent":"1",
    "notes":"Contact Rob for details",
    "end_date":"2018-06-14 00:00:00","id":"1.1"
  },
 
  // other tasks
]

Links

Gantt expects JSON data where each element of the array is a link 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 possiblevalues:
- 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
]

Jet Services

Gantt has the following services services for data:

Local - works with the client data
Operations - synchronizes the backend data with the client data
Backend - works with the backend server

If you do not have a backend server or require custom logic, you can override the Backend service.

Data Operations

Getting tasks

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

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

Note that if you are no sure whether the data has been already loaded to the collection it's make sense to use the waitData method to wait for a promise.

Using waitData to get tasks

//collection, can be empty until data is loaded
const tasks = $$("gantt").getService("local").tasks(); 
tasks.waitData.then(function(){
   tasks.getItem(tasks.getFirstId()); // get first task
});

Additionally, you can serialize the data collection to access the data elements themselves:

Serializing collection

const tasks = $$("gantt").getService("local").tasks(); 
tasks.waitData.then(function(){
   tasks.serialize(); // get an array of tasks
});

The method returns an array of task object available on the client:

[  
  {
    "text":"Task A1","start_date":"2018-06-12 00:00:00",
    "duration":"2","progress":31,"parent":"1",
    "notes":"Contact Rob for details",
    "end_date":"2018-06-14 00:00:00","id":"1.1"
  },
 
  // other tasks
]

Getting links

To access the collection of links call the links() method of the Local service:

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

Note that if you are no sure whether the data has been already loaded to the collection it's make sense to use the waitData method to wait for a promise.

Using waitData to get links

//collection, can be empty until data is loaded
const links = $$("gantt").getService("local").links(); 
links.waitData.then(function(){
   links.getItem(links.getFirstId()); // get first link
});

Additionally, you can serialize the data collection to access the data elements themselves:

Serializing collection

const links = $$("gantt").getService("local").links(); 
links.waitData.then(function(){
   links.serialize(); // get an array of links
});

The method returns an array of links objects available on the client:

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

Getting links of particular type

You can get a desired link by calling the getLinks() method. 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").

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

Related sample: Gantt: Data Operations

The method returns an object with the following fields:

id (string) - link ID;
text (string) - text of the source/target task;
ttype (string) - type of the specified task;
type (string) - link type.

JSON example

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