Performance Issue while using "minute" unit in scale

Gantt
#1

Hello,
I am showing some tasks in minute scale interval, it is taking a long time to load initially and most of the time browser just went to not responding. I am attaching two code snippets first one uses minute as a scale unit other one uses day as a scale unit. the day scale is loading without any delay while the minute scale taking too much time, Please let me know why this issue occurs and possible fix for it.

  1. Minute scale code snippet
  2. Day scale code snippet

Also tried some of the performance optimizations from the articles( gantt.config.show_task_cells = false; gantt.config.static_background = true), but still haven’t seen any improvement in performance.
3. Performance tweak snippet

#2

Hello Vyshnav,
You have a wrong format of the dates in the snippets. So, instead of the 20 days, you get 10 years:

1543×881 162 KB

So, it is expected that it will take a while to calculate the every minute for that scale.

When the date format is set correctly, the data is loaded within 300 milliseconds on my computer:
https://snippet.dhtmlx.com/cg5a10v7

#3

Hi Ramil,
Thanks for the quick replay. Actually, I want to show a minute scale for a large date interval, Suppose I have 5-year date range, I initially showed it in a year scale and I have a zoom-in button which will eventually make my scale to the minute interval, once it is switched to minute interval my browser become freeze.

I tested the performance for a 5-year interval in the minute scale (Performance for minute scale).
It took 23 seconds to load the chart and with gantt.config.show_task_cells = false; it took 25 seconds.

If using large date intervals causes performance issues can you give me the ideal range for a date range which not cause any issues,
ie; For a 1-year date range in minutes scale the chart will have 525600 timeline columns, so what will be the ideal column number?

Also, I noticed gantt is only rendering visible data, both for tasks and timeline dates, so the performance issue is not caused by the large amount of div rendered on the page but by the initial time required for processing the amount of timeline columns data. am I correct?

Also is there any way I can improve performance? or should I limit the timeline column count to a certain limit?

#4

Hello Vyshnav,
The issue here is not that Gantt renders the HTML elements or cells as the HTML elements outside the viewport are not rendered. Even if you have a few tasks, Gantt still needs to calculate the dates and width of the scale cells (they are also applied to the timeline cells).

Do you have any reasons to show 5 years with the minute precision? Even it is rendered that way, I don’t think it is convenient to scroll the chart to find the day or month you want.
Here is the video that demonstrates that even finding the same day will take some time:
https://files.dhtmlx.com/30d/68a5339748544e7cd7fb293882b6d9ac/vokoscreen-2023-10-13_19-06-02.mp4

If you use the zoom feature, you can limit the displayed date range to not calculate the values of other cells. To do that, you need to use the gantt.config.start_date and gantt.config.end_date parameters:
https://docs.dhtmlx.com/gantt/api__gantt_start_date_config.html

The tasks outside the displayed date range are not rendered in the grid and timeline. If you want to see them in the grid, you can enable the show_tasks_outside_timescale config:
https://docs.dhtmlx.com/gantt/api__gantt_show_tasks_outside_timescale_config.html

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/rsx07ard

1 Like