Skip to main content

Loading data

Preparing data​

The following types of information can be loaded into Gantt:

  • tasks - an array of objects with data on tasks
  const tasks = [
  {
    id: 1,
    open: true,
    start: new Date(2023, 11, 6),
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 60,
    type: "summary"
  },
  {
    id: 2,
    parent: 1,
    start: new Date(2023, 11, 6),
    duration: 4,
    text: "Lib-Gantt",
    progress: 80
  },
  {
    id: 3,
    parent: 1,
    start: new Date(2023, 11, 11),
    duration: 4,
    text: "UI Layer",
    progress: 30
  },
  {
    id: 4,
    start: new Date(2023, 11, 12),
    duration: 8,
    text: "Documentation",
    progress: 10,
    type: "summary"
  },
  {
    id: 5,
    parent: 4,
    start: new Date(2023, 11, 10),
    duration: 1,
    text: "Overview",
    progress: 30
  },
  {
    id: 6,
    parent: 4,
    start: new Date(2023, 12, 11),
    duration: 8,
    text: "API reference",
    progress: 0
  }
];
  • columns - an array of objects with data on columns for the table part (grid area with tasks tree) 
const columns = [
    { id: "text", header: "Task name", flexgrow: 2 },
    {
      id: "start",
      header: "Start date",
      flexgrow: 1,
      align: "center",
    },
    {
      id: "duration",
      header: "Duration",
      align: "center",
      flexgrow: 1,
    },
    {
      id: "action",
      header: "",
      width: 50,
      align: "center",
    },
  ];
  • links - an array of objects with data for links (dependencies between items)
const links = [
    { id: 1, source: 3, target: 4, type: "e2s" },
    { id: 2, source: 1, target: 2, type: "e2s" },
    { id: 21, source: 8, target: 1, type: "s2s" },
    { id: 22, source: 1, target: 6, type: "s2s" },
];
  • scales - an array of objects with data for time scales
 const scales = [
    { unit: "month", step: 1, format: "MMMM yyy" },
    { unit: "day", step: 1, format: "d", css: dayStyle },
];

To pass tasks, columns, links, and scales to Gantt, import data and define components during initialization:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt"; 
  
    const data = getData();

</script>

<Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
/>

Loading data from a local source​

You can load predefined data from a separate file at the initialization stage.

First, include the data file to the application page and import the Gantt component:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
</script>

Second, define components during Gantt initialization:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  
  const data = getData();

</script>

<Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
/>

Loading data from the server​

You can also load server data. You need to fetch data from the server and then pass it to Gantt with the same data tag.

To get server data, you can do one of the following:

  • send the request for data using the native fetch method (or any other way)

Example:

<script>
    import { Gantt } from "wx-svelte-gantt";

    const server = "https://some-backend-url";

    let api;
    let tasks = [];
    let links = [];

    Promise.all([
        fetch(server + "/tasks")
            .then(res => res.json()),
        fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
        tasks = t;
        links = l;
    });
    
</script>

<Gantt bind:api {tasks} {links} />
  • use the ready-made RestDataProvider service and connect it to the backend. First, import it and then apply the getData method. All detailed instructions you can find here: Working with server.

Example:

<script>
    import { Gantt } from "wx-svelte-gantt";
    import { RestDataProvider } from "wx-gantt-data-provider"; // import RestDataProvider
   
    const server = new RestDataProvider( 
      "https://some_backend_url", // pass the server url to RestDataProvider
    );

    let api;
    let tasks = [];
    let links = [];
    server.getData().then(data => { //load data
        tasks = data.tasks;
        links = data.links;
    });
    
    $: if (api) api.setNext(server); // include RestDataProvider into the Event Bus order to perform operations with data

</script>
<Gantt
    {tasks}
    {links}
    bind:api />

Dynamic data loading​

The widget also allows loading data dynamically. To enable it, in the tasks array you should set the lazy field to true for the tasks branches which child tasks you would like to load dynamically and tune your server so that the content of these child tasks is not loaded during the initial loading.

Example of the data array:

const tasks = [
  {
    id: 1,
    open: false,
    start: new Date(2020, 11, 6),
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 60,
    type: "summary",
    lazy: true
  },
  {
    id: 3,
    open: false,
    start: new Date(2020, 11, 7),
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 68,
    type: "summary",
    lazy: true
  },
];

When such tasks branches are opened in the UI, Gantt will issue the request-data action with the folder id as a parameter. We listen to this action with the api.on() method, fetch the tasks branch data from the server and parse to the component calling the provide-data action.

<script>
    import { Gantt } from "wx-svelte-gantt";

    const server = "https://some-backend-url";

    let tasks = [];
    let links = [];

    Promise.all([
        fetch(server + "/tasks")
            .then(res => res.json()),
        fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
        tasks = t;
        links = l;
    });

    function init(api) {
        api.on("request-data", ev => {
        Promise.all([
            fetch(server + `/tasks/${ev.id}`)
            .then(res => res.json()),
            fetch(server + `/links/${ev.id}`).then(res => res.json()),
            ]).then(([tasks, links]) => {
                api.exec("provide-data", {
                    id: ev.id,
                    data: {
                        tasks,
                        links,
                    },
                });
            });
        });
    }
</script>

<Gantt {init} {tasks} {links} />