Tree timeline month wise data

PrasadKulkarni · November 10, 2020, 10:30am

I am trying to create Tree timeline view with Annual data Monthwise.
Here’s what I have created timeline:
scheduler.createTimelineView({
section_autoheight: false,
name: “treetimeline”,
x_unit: “month”,
x_date: “%M”,
x_step: 1,
x_size: 12,
x_start: 0,
x_length: 12,
y_unit: results,
y_property: “section_id”,
render: “tree”,
folder_dy:30,
dy:60
});

Below is my JSONdata in results object for y_unit:
getStakeholderSections : “[{key:10, label:"BDM", open: true, children: [ {key:2, label:"Organization Change"} ]}, {key:30, label:"CD&O-Head", children: [ {key:2, label:"Organization Change"}, {key:2, label:"Process Change"} ]}, {key:110, label:"CD&O-Biosimilars", open:true, children: [ {key:2, label:"Organization Change"}, {key:2, label:"Process Change"}, {key:2, label:"System Change"}, {key:2, label:"Training"} ]} ]”

I’m unable to see this on timeline with below error :
Uncaught TypeError: Cannot read property ‘0’ of undefined
at Object.scheduler.render_view_data (dhtmlxscheduler.js:4968)
at Object.scheduler.update_view (dhtmlxscheduler.js:2937)
at Object.scheduler.updateView (dhtmlxscheduler.js:3029)
at Object.scheduler.setCurrentView (dhtmlxscheduler.js:3041)
at Object.scheduler.init (dhtmlxscheduler.js:2077)

Could you please help me with the concern.

Below is the timeline view when I passed hardcoded data in my visualforce page:

Siarhei · November 10, 2020, 4:24pm

Hello @PrasadKulkarni ,

The timeline in your screenshot(with the issue) looks like it wasn’t received data for the y_unit:

but in this case, there should be no issue in the console.

I suggest you check if you have the necessary data for y_unit before trying to create the treetimeline.

Also, the occurred issue could be connected with the incorrect data format of events, you can find the mandatory properties of the event by the following link:
https://docs.dhtmlx.com/scheduler/loading_data.html#dataproperties

So, you can try to check events format, or just try to load the scheduler without parsing/loading of events.

I also tried to reproduce the issue with the provided section-config, but it worked correctly:
http://snippet.dhtmlx.com/5/4f1f276db

If the issue still exists, could you please reproduce it in the demo above(reproduce=> click the “Share” button => send me the new link).
Or provide me a simplified demo, which I will be able to run locally and reproduce the issue?

Kind regards,

PrasadKulkarni · November 11, 2020, 7:14am

Hello @Siarhei,

Thank you very much for your response.

In first screenshot I sent in my question is; data passed from apex controller: Here is screenshot:

I can see the response data in my console as:

[{key:10, label:"BDM", open: true, children: [ {key:2, label:"Organization Change"} ]}, {key:30, label:"CD&O-Head", children: [ {key:2, label:"Organization Change"}, {key:2, label:"Process Change"} ]}, {key:110, label:"CD&O-Biosimilars", open:true, children: [ {key:2, label:"Organization Change"}, {key:2, label:"Process Change"}, {key:2, label:"System Change"}, {key:2, label:"Training"} ]} ]

and in second screenshot I passed data in my visualforce page only: here is the screenshot:

so the thing is static data is working fine with, but when I make dynamic call and try to align the data to section it isn’t working.

We can plan demo, if you could advise how to do so.

Siarhei · November 13, 2020, 5:41pm

Hello @PrasadKulkarni,

I’m not familiar with the Visualforce framework, and with the apex controller mechanic of work, but you can give access to the test page, where I will be able to reproduce the issue and make some code changes, or you can provide me a step-by-step instruction, on how to create the visualforce + apex controller demo, by my own and reproduce the issue.

btw, did you check, if the dynamic config of the timeline, is ready and accessible, before calling the createTimelineView method?

PrasadKulkarni · November 17, 2020, 2:53am

Hello @Siarhei

I’m able to load the data dynamically. It was just incorrect JSON parsing due to which data was not getting formed properly and inturn causing issue for data load.

Now was working on data save/update from timeline.
I would really appreciate if you could deviate me to the exact documents to get:
–Double click event
–Data save/update/modify event
–reloading scheduler

Regards,
Prasad Kulkarni

Siarhei · November 17, 2020, 5:22pm

Hello @PrasadKulkarni ,

Nice that you solved the issue with dynamic data.

Regarding follows:

Double click event

onDblClick:
https://docs.dhtmlx.com/scheduler/api__scheduler_ondblclick_event.html

Regarding follows :

Data save/update/modify event

onEventSave:
https://docs.dhtmlx.com/scheduler/api__scheduler_oneventsave_event.html

onEventChanged:
https://docs.dhtmlx.com/scheduler/api__scheduler_oneventchanged_event.html

onEventAdded:
https://docs.dhtmlx.com/scheduler/api__scheduler_oneventadded_event.html

onEventDeleted:
https://docs.dhtmlx.com/scheduler/api__scheduler_oneventdeleted_event.html

Regarding follows:

reloading scheduler

render(repaints the scheduler):
https://docs.dhtmlx.com/scheduler/api__scheduler_render.html
setCurrentView(repaints the scheduler if no parameters):
https://docs.dhtmlx.com/scheduler/api__scheduler_setcurrentview.html
clearAll(removes all data for the scheduler, so will be able to parse events again for the “clean” scheduler):
https://docs.dhtmlx.com/scheduler/api__scheduler_clearall.html

PrasadKulkarni · November 18, 2020, 5:16pm

Hi @Siarhei,

I’m facing issues in adding multiple events for same section_id of y_unit.
I am parsing data:

var dData = ‘[{“text”:“Medium”,“start_date”:“11/17/2020”,“id”:“a4Z5B000000A924UAC”,“end_date”:“11/25/2020”},{“text”:“Low”,“start_date”:“11/26/2020”,“id”:“a4Z5B000000A924UAC”,“end_date”:“12/25/2020”}]’;

I can see only one event the second one with text: Low and not the first one.

Could you please help me out with the concern?

PrasadKulkarni · November 19, 2020, 4:48am

Hi @Siarhei

Here is how my time line looks like:

CreateTimeline:

scheduler.createTimelineView({
name: “treetimeline”,
x_unit: “month”,
x_date: “%M”,
x_step: 1,
x_size: 12,
x_start: 0,
x_length: 12,
y_unit: JSON.parse(response[0]),
y_property: “id”,
render: “tree”,
folder_dy:30,
dy:60
});

Data parse:

var dData = ‘[{“text”:“Medium”,“start_date”:“11/17/2020”,“id”:“a4Z5B000000A924UAC”,“end_date”:“12/25/2020”}
,{“text”:“Low”,“start_date”:“01/26/2021”,“id”:“a4Z5B000000A924UAC”,“end_date”:“12/25/2021”}]’;
console.log(" >> " + dData);
scheduler.parse(dData,‘json’);

I can see only second event and not the first one, could you please help me out with the concern?

Siarhei · November 20, 2020, 11:42am

Hello @PrasadKulkarni,

This behavior occurs because both of your events have the same “id”. The “id” property should be unique for each event, as in your case, the event loaded the second(“low”), rewrites the previous loaded(“medium”).

Here is the updated demo(each event have a unique id for now):
http://snippet.dhtmlx.com/5/f7d287143