TimeWindow in Config - can't configure

[renatomenon]

Hello,

I am trying to configure TimeWindow property to my Gantt, but I can't get this working...

Using this code:

` var timewindows = { windowStart: 1598979874000, windowEnd: 1662051874000, };

var config = {
    data: {
        resources: {
            data: dataLoaded,
            // Activities of the resources are provided along with the 'activities' property of resource objects.
            // Alternatively, they could be listed from the 'data.activities' configuration.
            activities: 'activities',
            name: 'name', // The name of the resource is provided with the name property of the resource object.
            id: 'id', // The id of the resource is provided with the id property of the resource object.
        },
        // As activities are provided along with the resources, this section only describes how to create
        // activity Gantt properties from the activity model objects.
        activities: {
            start: 'start', // The start of the activity is provided with the start property of the model object
            end: 'end', // The end of the activity is provided with the end property of the model object
            name: 'name', // The name of the activity is provided with the name property of the model object
        },
        timeWindow: {
            // Fetch the time window returned as an object with the format
            start: 'windowStart', // The start of the time window is provided with the 'windowStart' property of the returned time window object
            end: 'windowEnd', // The end of the time window is provided with the 'windowStart' property of the returned time window object
            url: timewindows,
        },
    },
    toolbar: [
        'title',
        'search',
        'separator',
        {
            type: 'button',
            text: 'Refresh',
            fontIcon: 'fa fa-refresh fa-lg',
            onclick: function (ctx) {
                ctx.gantt.draw();
            },
        },
        'fitToContent',
        'zoomIn',
        'zoomOut',
    ],
    title: '@Resources.Planning',
};

new Gantt('gantt', config);`

I tried differents formats of date in object, but the same error.

Could anyone help me? Thanks.

Error: Error initializing the Gantt : Could not configure data for timeWindow. Probably a configuration issue with key(s) start,end checkFetcher@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:4074:17 setConfiguration@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:4201:21 GanttModel@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:750:14 GanttModel@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:4060:125 createModel@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:7946:19 setConfiguration@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:7914:27 GanttPanel/_this.initPromise<@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:7716:20

[delhoume]

you can find an example of usage at

https://github.com/IBM/gantt-chart/blob/60cca5558c20ea818dc512e0d60ea65c7adb6b5f/packages/ibm-gantt-chart-docs/src/docs/data_time_window.md

[delhoume]

can you use directly

timeWindow: { start: '1598979874000', end: 1662051874000 }

?

[renatomenon]

Hello @delhoume !

I tried to use this example (https://github.com/IBM/gantt-chart/blob/60cca5558c20ea818dc512e0d60ea65c7adb6b5f/packages/ibm-gantt-chart-docs/src/docs/data_time_window.md), but I don't have sure about a date format declaration in my object.

I declared an object like this example:

var timewindows = { windowStart: 1598979874000, windowEnd: 1662051874000, };

But doesn't worked.

Using value directing in configuration, like bellow, doesn't work too.

timeWindow: { start: '1598979874000', end: 1662051874000 }

[delhoume]

The code that shows an error is in https://github.com/IBM/gantt-chart/blob/60cca5558c20ea818dc512e0d60ea65c7adb6b5f/packages/ibm-gantt-chart/src/model/index.js#L36

and is called at

https://github.com/IBM/gantt-chart/blob/60cca5558c20ea818dc512e0d60ea65c7adb6b5f/packages/ibm-gantt-chart/src/model/index.js#L149

I do not know exactly why this fails and what should be the correct arguments, it seems that url should contain a path to a json object that should contains keys described in the start and end parts of the timeWindow object, so maybe defining an external file as shown in the doc works. The url is fetched then its windowStart and windowEnd keys are queried I think

[delhoume]

it seems that url is mandatory and it must be an external file, or you will have an error.

[delhoume]

I found that fetchers can have inline data (not urls), see https://github.com/IBM/gantt-chart/blob/60cca5558c20ea818dc512e0d60ea65c7adb6b5f/packages/ibm-gantt-chart-docs/src/docs/data_fetchers.md so you may try

timeWindow : { data: timewindows, start : 'windowStart', end : 'windowEnd' }

with timewindows beeing an array or a fonction returning an array.

[renatomenon]

Unfortunately I also tried differents ways... Using a separated json file or using a array like that bellow.

Also tried different types of date (linux epoch, ust etc) and changing the property names of start and end...

const timeWindows = {
        "windowStart": 1598979874000,
        "windowEnd": 1662051874000
    };
    var config = {
        data: {
            timeWindow: {
                start: 'windowStart',
                end: 'windowEnd',
                data: timeWindows,
            },
            resources: {
                data: dataLoaded,
                activities: 'activities',
                name: 'name', 
                id: 'id', 
            },
            activities: {
                start: 'start', 
                end: 'end', 
                name: 'name', 
            },
        },
        toolbar: [
            'title',
            'search',
            'separator',
            {
                type: 'button',
                text: 'Refresh',
                fontIcon: 'fa fa-refresh fa-lg',
                onclick: function (ctx) {
                    ctx.gantt.draw();
                },
            },
            'fitToContent',
            'zoomIn',
            'zoomOut',
        ],
        title: '@Resources.Planning',
    };

The same error is showed:

Error initializing the Gantt : Could not configure data for timeWindow. Probably a configuration issue with key(s) start,end checkFetcher@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:4074:17 setConfiguration@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:4201:21 GanttModel@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:750:14 GanttModel@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:4060:125 createModel@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:7946:19 setConfiguration@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:7914:27 GanttPanel/_this.initPromise<@http://localhost:50863/Scripts/ibm-gantt-chart-jquery.js:7716:20

[delhoume]

your const timeWindows = { "windowStart": 1598979874000, "windowEnd": 1662051874000 };

is not an array, can you try

const timeWindows = [ { "windowStart": 1598979874000, "windowEnd": 1662051874000 } ];

as described in doc for fetchers with the resources field ?

[delhoume]

Maybe also the values need to be strings

const timeWindows = [ { "windowStart": "1598979874000", "windowEnd": "1662051874000" } ];

[renatomenon]

I tried using these ways but got same error

[delhoume]

I am running out of ideas, I will try to trace source code to see what happens

[renatomenon]

In JS, this is line:

fetcher.get is undefined

[delhoume]

I do not see why timeWindow fetcher is different from other fetchers (activities or resources)... Maybe you can try to create a function that returns the array, that would be another code path

[renatomenon]

Thank you very much @delhoume

I really don't know why TimeWindow parameter in config do not work correctly here.

Now, I edited other path code in JS to force time window and it worked for me.

If you or someone else find where is my problem using timeWindow parameter in config, let me know!

Thank you for your time and help!

[delhoume]

You're welcome

[mhogeveen]

For future users trying to solve this problem, this was the solution that worked for me:

const config = {
    data: {
      ...,
      timeWindow: () => {
        return new Promise((resolve, _) => {
          resolve({
            start: <your start date here>,
            end: <your end date here>,
          });
        });
      },
    },
  };

https://github.com/IBM/gantt-chart/blob/60cca5558c20ea818dc512e0d60ea65c7adb6b5f/packages/ibm-gantt-chart/src/model/index.js#L190 This line seems to suggest the timeWindowFetcher expects a Promise and does not take any other forms of input into consideration.

Hope that helps!

[delhoume]

Thank you for your solution !

[precamp-io]

path code in JS to force

I am struggling with No time window defined - doesn't help but i am quiet new at this

var dataConfig = {
            resources : {
                url : "/api/data3",
                parent : "parent",
                id : "id",
                name : "name",
                activities : "activities", 
            },
            activities : {
                start : function(activities) { return makeDate(activities.start); },
                end : function(activities) { return makeDate(activities.end); },
                name : "name",
                parent : "parent",
                id : "id"
            },
        }

        var config = {
                        // 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: 'Marketing Swimlane',
        };
    //   new Gantt('gantt', config);

    $(document).ready(function() {
        // $('#gantt').Gantt(config);
        new Gantt( 'gantt', { data: dataConfig });
    });`

This is my controller:

    public function getProjectsTaskBusinessUnit(PickList $pickList)
    {

        $resources = PickList::query()->select('id', 'name', 'id as parent')
                        ->with(['activities' => function ($query) {
                            $query->select('projects.id', 'projects.name', 'projects.start_date as start', 'projects.end_date as end');
                        }])
                        ->where('group_by', 'business_units')
                        ->get();

        return response()->json([
            "resources" => $resources,
        ]);
    }

[delhoume]

It seems there is a solution two posts above

[precamp-io]

I have tried what is recommended not sure what I am missing

[precamp-io]

I have this error now Loading error : Invalid start "NaN"

[delhoume]

please show your timeWindow() code

[precamp-io]

var dataConfig = {
            resources : {
                url : "/api/data3",
                parent : "parent",
                id : "id",
                name : "name",
                activities : "activities", 
            },
            activities : {
                // start : function(activities) { return makeDate(activities.start); },
                // end : function(activities) { return makeDate(activities.end); },
                name : "name",
                parent : "parent",
                id : "id"
            },
            dateFormat : "yyyy-MM-dd'T'HH:mm:ss.SSSZ", // Format to parse date strings from.
            timeWindow: () => {
                return new Promise((resolve, _) => {
                    resolve({
                        start: function(activities) { return makeDate(activities.start); },
                        end: function(activities) { return makeDate(activities.end); },
                    });
                });
            },
        }

[precamp-io]

this is the error I am getting Error: Invalid start "NaN" at n._applyRange (https://devtest.precamp.io/assets/plugins/vis/vis.min.js:27:26532) at n.setRange (https://devtest.precamp.io/assets/plugins/vis/vis.min.js:27:25523) at n.setOptions (https://devtest.precamp.io/assets/plugins/vis/vis.min.js:27:23709) at https://devtest.precamp.io/assets/plugins/vis/vis.min.js:28:9113 at Array.forEach () at n.setOptions (https://devtest.precamp.io/assets/plugins/vis/vis.min.js:28:9084) at o.setOptions (https://devtest.precamp.io/assets/plugins/vis/vis.min.js:39:19034) at new o (https://devtest.precamp.io/assets/plugins/vis/vis.min.js:39:17827) at TimeLine.setTimeWindow (https://devtest.precamp.io/assets/plugins/ibm-gantt-chart/ibm-gantt-chart-jquery.js:16157:28) at GanttPanel.setTimeWindow (https://devtest.precamp.io/assets/plugins/ibm-gantt-chart/ibm-gantt-chart-jquery.js:7825:48)

[delhoume]

what is your makeDate function ? It should return a number as in new Date().getTime()