I am currently working on implementing custom grouping in the DHTMLX Gantt chart and have encountered an issue with grouping tasks by dynamic intervals based on task properties. I am trying to group tasks by their duration, specifically in dynamically specified intervals. For instance, I would like to group tasks by every 20 days of duration.
Example Scenario: I have tasks with varying durations and I want to group them such that each group represents a range of 20 days (e.g., 0-19, 20-39, etc.). However, the tasks that should fall into these groups based on their duration are not appearing within them.
- Tasks should be visually grouped under their respective interval labels in the Gantt chart.
const taskData = [
{ “ID”: 1, “TaskName”: “Task A”, “Duration”: 10, “Priority”: “High” },
{ “ID”: 2, “TaskName”: “Task B”, “Duration”: 22, “Priority”: “Medium” },
{ “ID”: 3, “TaskName”: “Task C”, “Duration”: 35, “Priority”: “Low” },
{ “ID”: 4, “TaskName”: “Task D”, “Duration”: 18, “Priority”: “High” },
{ “ID”: 5, “TaskName”: “Task E”, “Duration”: 5, “Priority”: “Low” },
{ “ID”: 6, “TaskName”: “Task F”, “Duration”: 47, “Priority”: “Medium” },
{ “ID”: 7, “TaskName”: “Task G”, “Duration”: 53, “Priority”: “High” },
{ “ID”: 8, “TaskName”: “Task H”, “Duration”: 61, “Priority”: “Low” },
{ “ID”: 9, “TaskName”: “Task I”, “Duration”: 8, “Priority”: “High” },
{ “ID”: 10, “TaskName”: “Task J”, “Duration”: 14, “Priority”: “Medium” },
{ “ID”: 11, “TaskName”: “Task K”, “Duration”: 25, “Priority”: “Low” },
{ “ID”: 12, “TaskName”: “Task L”, “Duration”: 36, “Priority”: “High” },
{ “ID”: 13, “TaskName”: “Task M”, “Duration”: 40, “Priority”: “Medium” },
{ “ID”: 14, “TaskName”: “Task N”, “Duration”: 52, “Priority”: “Low” },
{ “ID”: 15, “TaskName”: “Task O”, “Duration”: 63, “Priority”: “High” },
{ “ID”: 16, “TaskName”: “Task P”, “Duration”: 76, “Priority”: “Medium” },
{ “ID”: 17, “TaskName”: “Task Q”, “Duration”: 82, “Priority”: “Low” },
{ “ID”: 18, “TaskName”: “Task R”, “Duration”: 95, “Priority”: “High” },
{ “ID”: 19, “TaskName”: “Task S”, “Duration”: 7, “Priority”: “Medium” },
{ “ID”: 20, “TaskName”: “Task T”, “Duration”: 29, “Priority”: “Low” }
];
Expected Grouping
Group Range Tasks Included
|0-19 | Task A, Task D, Task E, Task I, Task J|
|20-39| Task B, Task C, Task K|
|40-59| Task L, Task M, Task N, Task O|
|60-79| Task H, Task P|
|80-99| Task R, Task S|
|100+ | Task T, Task Q|
While I have successfully created groups for the specified intervals, tasks are not being correctly assigned to these groups. Instead, they appear ungrouped at the bottom of the Gantt chart.
Do we have any solution for this?
Also, i don’t want to make a lot of tickets so i will ask in the same ticket I know Dhtmlx gantt does not provide fn for multiple groupings, but is there any way how can we achieve this manually ? Ex: i want to group by Duration, and by Priority ( with Cartesian product ) … any hint how can i achieve this?
thanks a lot ! <3