Loading large, dynamic dataset for y_unit in Timeline view

Hi,

I am using the scheduler in Timeline mode and I am loading the dataset (about 2000 plus records) for the y_unit via the database.

The issue I face is that this slows down the whole scheduler considerably. Adding events, etc become laggy and unresponsive.

Is there anyway to fix this? I am using the latest version of dhtmlxScheduler, i.e. 3.5.

Thanks in advance!

Hello,

You display 2000 units and their timeline at the same time, correct?

Best regards,
Ilya

Yes, that’s what I am trying to do … In a single timeline view with 2000 units or more in the y_unit.
thanks!

Also, I have to load the y_units from the database (this part I have already done). but the issue is that it slows everything down to an almost unusable state. :frowning:

Hi, any hints as to what I should do would be greatly appreciated. thanks.

Hello,

2000 is a lot. Even if you allocate as little as 30 pixels for each section it means your container have 60000 pixels height. Is there really a need for this? How is it being used? Maybe we can think of some different solution, for example you can display first 10 sections and put input above to search/filter other sections.

Unfortunately I don’t see direct ways to make it work.

Best regards,
Ilya

Hi,

Thanks for the reply. I am using it as a resource booking system, whereby the resources available for booking are displayed in the y_unit. There are currently approximately about 2000 different resources available.

Are you suggesting some sort of paging system to display the resources? Are there any paging systems we can adapt from any of the components or do we have to build our own?

Has there been any development on this issue? I have a similar issue but mine is a much smaller data set. I have 324 rows I am trying to load and IE8 keeps saying “A script is causing the browser to become unresponsive…blah blah blah”. 190 of these show a single event each and the other 134 are folders in a tree view. The script issue is without loading any events just trying to draw the tree timeline. My company is looking for a tool to purchase which can handle this load and much more and we need to know as soon as possible if we should consider a new tool.

Thanks

UPDATE: Apparently it is an issue with the scheduler.init(…) call even with a single folder and three sub keys. The timeline loads fine when I do the code outside the ajax call but fails inside.

                $.ajax({
                    type: "POST",
                    url: "ResourceManagement.asmx/GetDriverLinking",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: Parameters,
                    success: function (data) {
                        //===============
                        //Configuration
                        //===============
                        scheduler.locale.labels.timeline_tab = "Timeline"
                        scheduler.locale.labels.section_custom = "Section";
                        scheduler.config.xml_date = "%m/%d/%Y %H:%i";
                        scheduler.config.drag_resize = false;
                        scheduler.config.drag_create = false;
                        scheduler.config.details_on_create = false;
                        scheduler.config.details_on_dblclick = false;
                        scheduler.xy.nav_height = 0;

                        scheduler.createTimelineView({
                            section_autoheight: false,
                            name: "timeline",
                            x_unit: "minute",
                            x_date: " ",
                            x_step: 5,
                            x_size: 408,
                            x_start: -60,
                            x_length: 408,
                            y_unit: data.d,
                            y_property: "section_id",
                            render: "tree",
                            folder_events_available: true,
                            dy: 20,
                            second_scale: {
                                x_unit: "hour",
                                x_date: "%H:%i"
                            }
                        });

                        //===========================
                        // Handle Drag Event
                        //===========================

                        var old_section_id = 0;
                        var old_start_date = null;
                        var old_end_date = null;
                        scheduler.attachEvent("onBeforeDrag", function (event_id, mode, native_event_object) {
                            if (mode == "move") {
                                var event = scheduler.getEvent(event_id);
                                old_section_id = event.section_id;
                                old_start_date = event.start_date;
                                old_end_date = event.end_date;
                            }
                            return true;
                        });

                        scheduler.attachEvent("onBeforeEventChanged", function (event, native_event, is_new) {
                            if (!is_new) {
                                if (event.section_id != old_section_id) {
                                    event.section_id = old_section_id;
                                    event.start_date = old_start_date;
                                    event.end_date = old_end_date;
                                }
                            }
                            return true;
                        });

                        scheduler.attachEvent("onCellClick", function (x_index, y_index, x_value, y_value, e) {
                            if (x_index == 0) {
                                var section_id = y_value.section_id;
                                if (section_id == null) section_id = 1;

                                if (e.srcElement.innerHTML.indexOf("+") != -1) {
                                    scheduler.openSection(section_id);
                                }
                                else {
                                    scheduler.closeSection(section_id);
                                }
                            }
                            return true;
                        });

                        var scheduler_id = $('[id$=scheduler_here]').attr("id");
                        scheduler.init(scheduler_id, new Date("01/01/1900"), "timeline");
                    }
                });    

UPDATE: The following code in replacement of the data.d works eval(data.d). Apparently the data.d returns a string which is processed much slower. As far as performance goes this is a major issue. I have 324 total list items (134 folders + 190 sub items). The average load time was about 0.9 second per item which is approximately 4 minutes 52 seconds for all rows. This performance is based on a scale of 5 minute increments over a 34 hour period (408 table cells wide). When I change the scale to hours (34 table cells wide) it loaded in about 3 seconds.

We are having performance issues when trying to load large amounts of data. One test of 900 rows took 30 seconds to load, but that included 4.5 seconds to load the json data. If we cannot improve this significantly we will go with TreeGrid or another product :smiling_imp:

Scheduler is not a grid for sure. It is not purposed to show the long lists of data.
If you have the sample or online demo, I can check it ( in modern browsers, it still must take up to 5 seconds, not 30, but if you are talking about IE7-8 - it can take up to 30sec on such dataset )