Custom Grouping by Intervals

Gantt
#1

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 :slight_smile: 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? :slight_smile:
thanks a lot ! <3

#2

Hello Luis,

Try the following approach:
Let’s add the durationRange property depending on the duration:

const data = {
	tasks: [
        { id: 1, text: 'Task A', start_date: '02-05-2024', duration: 10, priority: 1 },
        ...
    ],
	links: [
	]
};

function addDurationRange(tasks) {
    tasks.forEach(task => {
        const duration = task.duration;
        if (duration >= 0 && duration <= 19) {
            task.durationRange = 1;
        } else if (duration >= 20 && duration <= 39) {
            task.durationRange = 2;
        } else if (duration >= 40 && duration <= 59) {
            task.durationRange = 3;
        } else if (duration >= 60 && duration <= 79) {
            task.durationRange = 4;
        } else if (duration >= 80 && duration <= 99) {
            task.durationRange = 5;
        } else {
            task.durationRange = 6;
        }
    });
}

addDurationRange(data.tasks);

Now you can do the grouping:

function showGroups() {
    gantt.groupBy({
        relation_property: 'durationRange',
        groups: gantt.serverList('durationRange'),
        group_id: 'key',
        group_text: 'label'
    });
}

Groups:

gantt.serverList('durationRange', [
    { key: 1, label: 'Duration 0-19' },
    { key: 2, label: 'Duration 20-39' },
    { key: 3, label: 'Duration 40-59' },
    { key: 4, label: 'Duration 60-79' },
    { key: 5, label: 'Duration 80-99' },
    { key: 6, label: 'Duration 100+' },
]);

Here is an example: DHTMLX Snippet Tool

As for:

i want to group by Duration, and by Priority

Unfortunately, there’s no simple solution, and it does require some custom code.