IBM / gantt-chart

IBM Gantt Chart Component, integrable in Vanilla, jQuery, or React Framework.
https://ibm.github.io/gantt-chart/packages/ibm-gantt-chart-docs/storybook
Apache License 2.0
215 stars 52 forks source link

Load() function a how to compose data passed #81

Closed StijnBt closed 2 months ago

StijnBt commented 5 months ago

Hello,

Someone that can help me out with the load() function order to refresh data on the Gantt chart? I already tried many variations on how to compose the data to pass on to the load() function but none seem to work. The first time when I open the page it loads fine & its calling the InnitGantt(). But once loade I want to update the data on my Gantt with the RefreshGanttData() but I don't seem to get this working. The result is always "No data available in the table"

let ganttInstance

function InitGantt(data){
  //console.log(data);
  ganttConfig = JSON.parse(data);
  ganttInstance = new Gantt('gantt', ganttConfig);
  Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("OnControlInitialized", []);
}

function RefreshGantt(data){
  console.log(data);
  ganttData = JSON.parse(data);
  ganttInstance.load(ganttData);
  //ganttInstance.draw();
}

data passed on InitGanttData

{
    "type": "Gantt.type.SCHEDULE_CHART",
    "data": {
        "resources": {
            "data": [
                {
                    "id": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Ontwikkeling",
                    "parent": ""
                },
                {
                    "id": "{377B0CE7-1812-EF11-9FD8-DCB0BC2C459B}",
                    "name": "James",
                    "parent": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                },
                {
                    "id": "{BEB7147F-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "John",
                    "parent": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                }
            ],
            "name": "name",
            "id": "id",
            "parent": "parent"
        },
        "activities": {
            "data": [
                {
                    "id": "P00101-20020",
                    "name": "Trade",
                    "start": "2024-05-15T22:00:00Z",
                    "end": "2024-05-16T21:59:00Z",
                    "parent": ""
                }
            ]
        },
        "reservations": {
            "data": []
        },
        "dateFormat": "yyyy-MM-dd'T'HH:mm:ss.SSSZ"
    },
    "toolbar": [
        "title",
        "separator",
        "mini",
        "separator",
        "fitToContent",
        "zoomIn",
        "zoomOut",
        "separator",
        "toggleLoadChart"
    ],
    "title": "Resource Load"
}

data passed on RefreshGantt

{
    "data": {
        "resources": {
            "data": [
                {
                    "id": "{61FE27BD-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Consultancy",
                    "parent": ""
                },
                {
                    "id": "{BBB7147F-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Consultant",
                    "parent": "{61FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                },
                {
                    "id": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Ontwikkeling",
                    "parent": ""
                },
                {
                    "id": "{377B0CE7-1812-EF11-9FD8-DCB0BC2C459B}",
                    "name": "James",
                    "parent": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                },
                {
                    "id": "{BCB7147F-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Ontwikkelaar",
                    "parent": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                },
                {
                    "id": "{BEB7147F-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "John",
                    "parent": "{63FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                },
                {
                    "id": "{65FE27BD-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Projectmanagement",
                    "parent": ""
                },
                {
                    "id": "{BDB7147F-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Projectmanager",
                    "parent": "{65FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                },
                {
                    "id": "{69FE27BD-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "verk",
                    "parent": ""
                },
                {
                    "id": "{BFB7147F-A30C-EF11-9FCE-EFDACBEF4090}",
                    "name": "Verkoop",
                    "parent": "{69FE27BD-A30C-EF11-9FCE-EFDACBEF4090}"
                }
            ],
            "name": "name",
            "id": "id",
            "parent": "parent"
        },
        "activities": {
            "data": [
                {
                    "id": "P00101-20020",
                    "name": "Trade",
                    "start": "2024-05-15T22:00:00Z",
                    "end": "2024-05-16T21:59:00Z",
                    "parent": ""
                }
            ]
        },
        "reservations": {
            "data": []
        },
        "dateFormat": "yyyy-MM-dd'T'HH:mm:ss.SSSZ"
    }
}

image