Samples Forum Support
Documentation
StartGantt APIMethods

parse

loads data from a client-side resource

void parse(string | DataToLoad data, [string type] );
datastring | DataToLoada string or object which represents data
typestringoptional, ('json', 'xml') the data type. The default value - 'json'

Example

gantt.parse({
    data:[
        {id:1, text:"Project #2", start_date:"01-04-2023", duration:18},
        {id:2, text:"Task #1",    start_date:"02-04-2023", duration:8,
            progress:0.6, parent:1},
        {id:3, text:"Task #2",    start_date:"11-04-2023", duration:8,
            progress:0.6, parent:1}
    ],
    links:[
        { id:1, source:1, target:2, type:1},
        { id:2, source:2, target:3, type:0}
    ]
});

Related samples

Details

Gantt expects that an array with tasks will be named either data or tasks whereas an array with links will be named links.

This is the list of expected properties:

  • data - ([] | NewTask[]) - the array with the task data
  • links? - (Link[]) - the array with the link data
  • resources? - (NewResourceItem[]) - the array with the resource data
  • assignments? - (NewAssignmentItem[]) - the array with the assignment data
  • collections? - (Сollections) - the object that has the arrays with the custom data
gantt.parse({
    data: [
        { id: 1, start_date: "2025-09-23", duration: 42, 
            text: "House Construction" },
        { id: 2, start_date: "2025-12-02", duration: 60, 
            text: "House Construction" },
    ],
    "links": [
        { id: "1", source: "1", target: "2", type: "0" },
    ],
    "resources": [
        { id: 1, text: "Anna, Architect", unit: "hours/day", 
            default_value: 8, type: "work" },
    ],
    "assignments": [
      { task_id: "1", resource_id: "1", value: "8" },
      { task_id: "2", resource_id: "1", value: "8", 
            mode: "fixedDates", start_date: "2025-09-23", 
            end_date: "2025-09-25", duration: 4, delay: 2,  },
      { task_id: "2", resource_id: "1", value: "8", 
            start_date: new Date("2025-09-23 00:00:00"), 
            end_date: new Date("2025-09-26 00:00:00"), },
    ]
})

The data or tasks array expects the NewTask object that is different from the Task object. It can be a string, an empty object. It can have the same properties as the Task object, and you can add any custom properties there. The difference is that some properties of the Task object that start from the $ sign are ignored and the dates can have the string type. Here is the type description:

  • NewTask - (string | {} | object) - the task object that will be added to Gantt. It can have the following properties:
    • id? - (string | number) - optional, the task ID, auto-generated if not set.
    • start_date? - (string | Date) - optional, the date when a task is scheduled to begin.
    • duration? - (number) - optional, the task duration.
    • end_date? - (string | Date) - optional, the date when a task is scheduled to be completed.
    • text? - (string) - optional, the task name.
    • open? - (boolean) - optional, specifies if the task will be opened on load (to show child tasks).
    • parent? - (string | number) - optional, the ID of the parent task.
    • constraint_date? - (string | Date) - optional, the date of the task constraint.
    • [customProperty: string] - (any) - any other property you want to add, including the ones from the Task object

This is not the full list of possible task properties. For that, please refer to this article.

gantt.parse({
    data: [
        { id: 1, start_date: "2025-09-23", duration: 42, 
            text: "House Construction" },
    ]
})

The links array expects the Link objects.

gantt.parse({
    data: [],
    links: [
        { id: "1", source: "1", target: "2", type: "0" },
    ]
})

The resources array expects the NewResourceItem object that may have the properties below:

  • NewResourceItem - (object) - the resource item object that will be added to Gantt. It can have the following properties:
    • id? - (string | number) - optional, the resource ID, auto-generated if not set
    • parent? - (string | number) - optional, the ID of the parent resource
    • text? - (string) - optional, the resource name
    • open? - (boolean) - optional, specifies if the resource will be opened on load (to show child items)
    • unit? - (string | number) - optional, the unit of the resource assignment
    • default_value? - (string | number) - optional, the value that is assigned by default when adding the assignment in the lightbox section
    • [customProperty: string] - (any) - any other property you want to add
gantt.parse({
    data: [],
    resources: [
        { id: 1, text: "Anna, Architect", unit: "hours/day", 
            default_value: 8, type: "work" },
    ]
})

The assignments array expects the NewAssignmentItem object that may have the properties below:

  • NewAssignmentItem - (object) - the assignment item object that will be added to Gantt. It can have the following properties:
    • id? - (string | number) - optional, the assignment ID, auto-generated if not set
    • task_id - (string | number) - the ID of the task the resource is assigned to
    • resource_id - (string | number) - the ID of the resource that is assigned to the task
    • value - (number | string) - optional, the assignment value
    • mode? - (string) - optional, the calculation mode of the time of the resource assignment: "default"|"fixedDates"|"fixedDuration"
    • delay? - (number) - optional, the difference between the assignment start date and the task start date
    • start_date? - (string | Date) - optional, the date the assignment should start
    • duration? - (number) - optional, the assignment duration
    • end_date? - (string | Date) - optional, the date the assignment should end
    • [customProperty: string] - (any) - any other property you want to add
gantt.parse({
    data: [],
    assignments: [
      { task_id: "1", resource_id: "1", value: "8" },
    ]
})

The collections object allows loading any custom data. The properties can have any name, and the value should be an array that contains the collection items:

  • [collectionName: string] - ([] | СollectionItem[]) - an array that contains the collection items.

The СollectionItem is an object that can have any properties. It has the following types for its properties:

  • [itemProperty: string] - (any) - any custom property of the collection item.
gantt.parse({
    data: [
        { "id": "1", "text": "Task #1", "priority": 1, 
            "start_date": "02-04-2019", "duration": 1, },
        { "id": "2", "text": "Task #2", "priority": 2,  
            "start_date": "01-04-2019", "duration": 1, },
        { "id": "3", "text": "Task #3", "priority": 3,  
            "start_date": "02-04-2019", "duration": 1, },
        { "id": "4", "text": "Task #4", "priority": 1,  
            "start_date": "03-04-2019", "duration": 1, },
    ],
    links: [],
    collections: {
        task_priority: [
            { key: 1, label: "High" },
            { key: 2, label: "Normal" },
            { key: 3, label: "Low" }
        ]
    }
});

If you want to load data which doesn't contain tasks, you still need to define an array of tasks in the object with data but it can be empty:

gantt.parse({
    tasks:[],
    links:[
        { id:1, source:1, target:2, type:1},
        { id:2, source:2, target:3, type:0}
    ]
});


From v8.0, besides tasks and links, you can load resources and resource assignments into the gantt via the parse() method:

gantt.parse({
    tasks: [
        ...,
        {
            id: 5,
            text: "Interior office",
            type: "task",
            start_date: "03-04-2024 00:00",
            duration: 7,
            parent: "2",
            owner: [
                {
                    resource_id: "6",
                    value: 3,
                    start_date: "03-04-2024 00:00",
                    end_date: "05-04-2024 00:00",
                }
            ]
        },
        ...
    ],
    links: [],
    resources: [
        {id: 6, text: "John", unit: "hours/day" },
        {id: 7, text: "Mike", unit: "hours/day" },
        {id: 8, text: "Anna", unit: "hours/day" },
        {id: 9, text: "Bill", unit: "hours/day" },
        {id: 10, text: "Floe", unit: "hours/day" }
    ]
});

You can read more here.

See also
  • API
  • Articles
    • Back to top