I don't succeed in showing data

[adrienthiery]

Hi there, I'm surely missing something here, but can't find it out from the docs...

I pass a config like so:

const config = {
    type: 'Gantt.type.ACTIVITY_CHART',
    data: {
        activities: {
            data: tasks,
            id: 'id',
            start: 'Début', // The start of the activity is provided with the start property of the model object
            end: 'Fin', // The end of the activity is provided with the end property of the model object
            name: 'Nom', // The name of the activity is provided with the name property of the model object
        },
        dateFormat: 'dd/MM/yyyy HH:mm',
    },
    // Configure a toolbar associated with the Gantt
    toolbar: [
        'title',
        'search',
        'separator',
        {
            type: 'button',
            text: 'Refresh',
            fontIcon: 'fa fa-refresh fa-lg',
            onclick: function (ctx) {
                ctx.gantt.draw();
            },
        },
        'fitToContent',
        'zoomIn',
        'zoomOut',
    ],
    title: 'Planning', // Title for the Gantt to be displayed in the toolbar
};

const GanttIBM = (props) => {
    return <GanttChart config={config} />;
};

Where tasks is coming from a JSON :

[
  {
    "id": 1,
    "WBS": "1",
    "Nom": "TRAVAUX",
    "Durée": 230,
    "Début": "05/04/2021 09:00",
    "Fin": "18/02/2022 18:00",
    "Prédécesseurs": 10
  },
  {
    "id": 2,
    "WBS": "1.1",
    "parent": "1",
    "Nom": "Bâtiment A",
    "Durée": 100,
    "Début": "05/04/2021 09:00",
    "Fin": "20/08/2021 18:00",
    "Prédécesseurs": ""
  },
  ...
]

It keeps erroring with Cannot read property 'length' of undefined on rows.length in the model.load() promise :

return this.model.load().then(function (rows) {
        var wnd = _this5.getTimeWindow();

        if (!wnd || !wnd.start) {
          if (!rows.length) { // <---------------------------------- HERE
            // Empty Gantt, this is ok
            var today = new Date().getTime();
            var day = 1000 * 3600 * 24;

            _this5.setTimeWindow({
              start: today - day * 2,
              end: today + day * 2
            });
          } else {
            stopLoading();
            return promise_default.a.reject(core["a" /* default */].utils.getString('gantt.error.no-time-window-defined'));
          }
        }
...

I tried with different shapes for tasks like { activities: tasks } , but no luck.

Any idea what I'm doing wrong ? 🤔
I already spent several hours there...

[delhoume]

Your format for dates might be the problem

Dates are to be given by default in milliseconds since start of Era. However you may change the format, see https://ibm.github.io/gantt-chart/packages/ibm-gantt-chart-docs/storybook/?path=/story/guides-data--dates

[adrienthiery]

Hi there ! Thanks for the prompt response.

I do have the dateFormat: 'dd/MM/yyyy HH:mm', in there though 🤔

[delhoume]

I missed that...

I suggest you start from a working delivered sample and build incrementally upon that. You might also check that accents in data are not the cause of the failure. Also for an Activty gantt resource must be defined I think.

[adrienthiery]

Hi there,

Ok, so I managed to finally get my data to show by taking the example out of the Activity Chart and remove all the XML Stuff.

This led to a config like this (removing non essential things):

const config = {
    type: Gantt.type.ACTIVITY_CHART,
    data: {
        activities: {
            data: [{
                "id": "A-Root",
                "name": "Project Summary",
                "start": 1487718000000,
                "end": 1508277600000,
                "parent": null
            }, {
                "id": "A-1",
                "name": "Gather Requirements",
                "start": 1487718000000,
                "end": 1489186800000,
                "parent": "A-Root"
            }, {
                "id": "A-1.1",
                "name": "Talk to customers",
                "start": 1487718000000,
                "end": 1488582000000,
                "parent": "A-1"
            }, {
                "id": "A-1.1.1",
                "name": "Compile customer list",
                "start": 1487718000000,
                "end": 1487890800000,
                "parent": "A-1.1"
            }, {
                "id": "A-1.1.2",
                "name": "Contact customers",
                "start": 1487890800000,
                "end": 1488582000000,
                "parent": "A-1.1"
            }, {
                "id": "A-1.2",
                "name": "Write up requirements",
                "start": 1488582000000,
                "end": 1488841200000,
                "parent": "A-1"
            }, {
                "id": "A-1.3",
                "name": "Review requirements",
                "start": 1488754800000,
                "end": 1489186800000,
                "parent": "A-1"
            }, {
                "id": "A-2",
                "name": "Marketing Specification",
                "start": 1489186800000,
                "end": 1490223600000,
                "parent": "A-Root"
            }, {
                "id": "A-2.1",
                "name": "First Draft Specification",
                "start": 1489186800000,
                "end": 1489791600000,
                "parent": "A-2"
            }, {
                "id": "A-2.2",
                "name": "Second Draft Specification",
                "start": 1489791600000,
                "end": 1490223600000,
                "parent": "A-2"
            }, {
                "id": "A-3",
                "name": "Engineering Review",
                "start": 1490223600000,
                "end": 1491084000000,
                "parent": "A-Root"
            }, {
                "id": "A-4",
                "name": "Proof of Concept",
                "start": 1491084000000,
                "end": 1495576800000,
                "parent": "A-Root"
            }, {
                "id": "A-4.1",
                "name": "Rough Design",
                "start": 1491084000000,
                "end": 1492898400000,
                "parent": "A-4"
            }, {
                "id": "A-4.1.1",
                "name": "CAD Layout",
                "start": 1491084000000,
                "end": 1492293600000,
                "parent": "A-4.1"
            }, {
                "id": "A-4.1.2",
                "name": "Detailing",
                "start": 1492034400000,
                "end": 1492898400000,
                "parent": "A-4.1"
            }, {
                "id": "A-4.2",
                "name": "Fabricate Prototype",
                "start": 1492466400000,
                "end": 1494367200000,
                "parent": "A-4"
            }, {
                "id": "A-4.2.1",
                "name": "Order Materials",
                "start": 1492466400000,
                "end": 1493157600000,
                "parent": "A-4.2"
            }, {
                "id": "A-4.2.2",
                "name": "Machining",
                "start": 1493157600000,
                "end": 1494367200000,
                "parent": "A-4.2"
            }, {
                "id": "A-4.3",
                "name": "Burn-in Testing",
                "start": 1494367200000,
                "end": 1494972000000,
                "parent": "A-4"
            }, {
                "id": "A-4.4",
                "name": "Prepare Demo",
                "start": 1494972000000,
                "end": 1495576800000,
                "parent": "A-4"
            }, {
                "id": "A-5",
                "name": "Design and Development",
                "start": 1495576800000,
                "end": 1507068000000,
                "parent": "A-Root"
            }, {
                "id": "A-5.1",
                "name": "Phase I Development",
                "start": 1495576800000,
                "end": 1500415200000,
                "parent": "A-5"
            }, {
                "id": "A-5.2",
                "name": "Phase II Development",
                "start": 1500415200000,
                "end": 1504044000000,
                "parent": "A-5"
            }, {
                "id": "A-5.3",
                "name": "Phase III Development",
                "start": 1504044000000,
                "end": 1507068000000,
                "parent": "A-5"
            }, {
                "id": "A-6",
                "name": "Packaging",
                "start": 1500415200000,
                "end": 1508277600000,
                "parent": "A-Root"
            }, {
                "id": "A-6.1",
                "name": "User Manual",
                "start": 1500415200000,
                "end": 1507068000000,
                "parent": "A-6"
            }, {
                "id": "A-6.2",
                "name": "Installation Procedures",
                "start": 1505858400000,
                "end": 1508277600000,
                "parent": "A-6"
            }, {
                "id": "A-6.3",
                "name": "Update WebSite",
                "start": 1507068000000,
                "end": 1508277600000,
                "parent": "A-6"
            }, {
                "id": "A-7",
                "name": "End of project",
                "start": 1508277600000,
                "end": 1508277600000,
                "parent": "A-Root"
            }],
            start: 'start',
            end: 'end',
            name: 'name',
            parent: 'parent',
        },
        constraints: {
            data: [{
                "from": "A-4.2.1",
                "to": "A-4.2.2",
                "type": 1
            }, {
                "from": "A-2",
                "to": "A-3",
                "type": 1
            }, {
                "from": "A-4.1.1",
                "to": "A-4.1.2",
                "type": 1
            }, {
                "from": "A-5.2",
                "to": "A-6.1",
                "type": 0
            }, {
                "from": "A-3",
                "to": "A-4",
                "type": 1
            }, {
                "from": "A-4.1.2",
                "to": "A-4.2.1",
                "type": 0
            }, {
                "from": "A-1.2",
                "to": "A-1.3",
                "type": 1
            }, {
                "from": "A-5.2",
                "to": "A-5.3",
                "type": 1
            }, {
                "from": "A-1.1.1",
                "to": "A-1.1.2",
                "type": 1
            }, {
                "from": "A-2.1",
                "to": "A-2.2",
                "type": 1
            }, {
                "from": "A-1.1",
                "to": "A-1.2",
                "type": 1
            }, {
                "from": "A-5.1",
                "to": "A-5.2",
                "type": 1
            }, {
                "from": "A-1",
                "to": "A-2",
                "type": 1
            }, {
                "from": "A-4",
                "to": "A-5",
                "type": 1
            }],
            from: 'from',
            to: 'to',
            type: 'type',
        },
    },
    toolbar: [
        'title',
        'search',
        'separator',
        'mini',
        'separator',
        'fitToContent',
        'zoomIn',
        'zoomOut',
    ],
    title: 'Activity Chart example',
};

From there, I did manage to get to something using my own data.

Although I had to rework my dates with date-fns to get a timestamp out of my dates, I'll report back if I manage to have the dateFormat working.

Hopefully this can help next devs coming along.

Thanks again for the help and pointers 🙂

[watery]

Hi there, I'm surely missing something here, but can't find it out from the docs...

I pass a config like so:

[...]

Late, but anyway. There are at least two issues in the code in your opening post:

1. config.type value is a string (see #69 )
2. dateFormat doesn't have a token for seconds (see #71 )