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.

Back to top