dhtmlxGantt 6.0 Major Update: Advanced Resource Management

Assigning a particular resource to a certain task is a great feature. However, it might not be enough for managing complex projects such as construction, engineering or manufacturing works, where the completion of each task requires diverse resources like employees, building materials, and equipment. So we’ve been looking forward to this major release of dhtmlxGantt 6.0 with new multiple resource management functionality and other essential updates in our JavaScript Gantt chart library!

Get down to testing the latest update with a free 30-day trial version right now.

Multiple Resources per Task [PRO]

Let’s take a look at a typical construction project. Apart from construction workers, there are many other specialists like architects, plumbers, electricians etc. to cooperate on the house construction. Besides, workers can’t do without special equipment, concrete, pipes, wires, and other materials, which need to be included in the project and influence the final cost and time to completion.

“Construction workers rely on so many contractors that delays are bound to occur, putting them behind schedule almost half of the time. A project management system helps update everyone involved on the project and keep track of updates in real-time,” says monday.com Senior Product Manager Dotan Egozi.

With the ability to assign different resources to one task, project managers will get a complete plan of construction.

Construction Project with dhtmlx GanttConstruction project with work and material resources. Check the sample >

In order to apply this feature in the Gantt chart developers can connect any number of resources to each task via the task object properties:

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [2, 3] // 2 and 3 are the ids of resources
}

For defining the quantity/amount of each resource it’s necessary to specify the desired values for resources:

{
    id: 1, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6,
    users: [{resource_id:2, value:8}, {resource_id:3, value:4}]  
}

For end users assigning multiple resources to a task is available in the lightbox by means of the Resource control. dhtmlxGantt also allows using any custom Resource control you prefer. For example, you can easily integrate Chosen, a jQuery plugin to make a simple multiselect control. This plugin enables the selection of several resources to be assigned to a task.

Several owners for tasksCheck the sample >

V6.0 also includes a built-in control for managing resource assignments. The new control allows not only adding resources to tasks but also entering the amount of resources – for example, ‘4 hours per day’, ‘1 unit of equipment’. Besides, our Resource control provides such usability features as search and filtering of resources and displaying only those resources which have been assigned to the task.

Assigning multiple resources per taskCheck the sample>

Resource Histogram [PRO]

The resource histogram is a new layout view for showing the resource load per day. It clearly demonstrates the maximum capacity of resources per day and the days when resources are overloaded highlighting them in red.

Resource Histogram Resource Histogram. Check the sample >

In order to understand how resources are allocated among tasks and manage the resource load more efficiently, you can enable an expanded resource panel. There end users will be able to verify which tasks each resource is assigned to and how its total quantity is allocated among tasks. This mode is also available for the Resource diagram.
Expanded Resource HistogramDisplaying the resource panel with the resource histogram. Check the sample >

Grouping Tasks by Resources [PRO]

The Grouping extension was also updated in order to support the new multiple resource assignment functionality. If you group tasks by assigned resources while some tasks have multiple resources assigned – the extension will automatically create groups for each combination of resources used in a project.

Grouping by resourcesCheck the resource grouping sample >

Free and Total Slack of Tasks

In v6.0 in addition to the Critical path and Free slack, we provided the ability to get Total slack of tasks in a project. Free slack means that after finishing one task there is still some time before the next task connected to it starts. Thus, project managers may prolong the previous task or postpone it for the time of the Free slack without affecting the next task. Total slack follows the same logic but in relation to the whole project. It calculates the time reserve left for the task to be fulfilled so that the project will be completed on time. However, delaying a task for the time of Total slack may affect the starting time of other tasks.

var task = gantt.getTask(7);
gantt.getFreeSlack(task);
var task = gantt.getTask(7);
gantt.getTotalSlack(task);

Total SlackCheck the Free and Total slack samples >

Project Import from MS Excel File

Another piece of good news! Now project managers can import data describing their projects to the Gantt chart directly from MS Excel files. Developers can enable the import functionality via the export service or the client-side API. Due to an arbitrary structure of Excel documents, the service can’t convert any table to Gantt project automatically. Instead, it converts the document into an array of records which you can process from code. A typical way for this is to implement a UI that would allow the user to specify which column of the spreadsheet matches which attribute of the Gantt item. Once the user confirms the selection – you can convert the data and import it into your project. You can check our example to see it in action. Check sample >

Other Important Improvements
  • Improved tasks reordering in the “branch” mode
  • The “REST-JSON” dataProcessor mode for easier backend integration

TypeScript definitions haven’t been updated this time. We’ll do a follow-up on them in the next couple of weeks and bring the TypeScript support back on track.

And finally, we’ve disabled the methods that were deprecated back in v4.0. If you still use any of them in your code – please update them according to our migration notes. The transition is likely to be easy, as it won’t lead to any changes in arguments or behavior. On the bright side, in case you plan to use dhtmlxGantt together with dhtmlxSuite, this will prevent possible conflicts between libraries.

We hope that advanced resource management functionality, import from MS Excel files and other Gantt 6.0 achievements will help you bring your project management apps to the new level and provide your end users with greater opportunities!

Please, note that the newly introduced resource management features are included in the PRO edition available under Commercial and Enterprise licenses.

6.0 evaluation version is awaiting your judgment. We’re eager to get your feedback!

Current clients are invited to their Client Area where they’ll find v6.0. The newsletter about the release will come shortly.

Related Material:

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components