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

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.
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);
position (number) - task position in the branch;
duration (number) - duration of the task in days;
details (string) - notes about the task;
opened (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":true,
    "notes":"Weekly meeting required", "type": "project",
    "end_date":"2018-06-14 00:00:00","id":"1"
  },
  // 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. 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 is 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 is 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"
}