Resource Management Functionality in DHTMLX Gantt

When developing a web-based project management application, it is vital to apply the right JavaScript tool to implement features covering all business needs. Handling projects is not only about scheduling, managing, and completing tasks in time, but also about doing it with maximum efficiency and minimal financial expenses. It can be achieved by the proper use of resources available for a given project. According to a recent report from Wellingtone, many companies name poor resource management as one of the most serious issues affecting their business processes.

DHTMLX Gantt is a popular JavaScript library that can be integrated into any business web application. It comes with advanced functionalities required for dealing with both project tasks and resources (personnel, equipment, monetary assets, etc.) via feature-packed Gantt charts complemented with resource management capabilities. In this article, we are going to review the main advantages of this JS component focused on running project resources.

Managing Project Resources with DHTMLX Gantt

Apart from a basic function to allocate tasks to resources and apply various styles for showing their interrelations, DHTMLX Gantt offers end-users a lot of more sophisticated options for addressing resource-related issues. For instance, web developers can implement the following features:

  • special built-in views for displaying workloads
  • utilizing multiple resources for fulfilling one task
  • working schedules for resources
  • grouping tasks by resources

Let us consider these interesting points in more detail.

DHTMLX Gantt enables project managers to review resource workloads within the project via resource load diagrams and resource histograms. These built-in views allow properly assessing and analyzing workloads for each resource involved in the completion of a particular task or stage of the project, as well as a resource input for the whole project.

Resource load diagrams illustrate current resource loading at a given date and overloads (commonly highlighted in vivid colors). A histogram is a more informative tool, as in addition to actual loading and possible overloads, it shows the maximum daily workload, allowing users to utilize resources with utmost efficiency. For the convenience of use, these visualization tools can display workloads per day measured in hours and in tasks.

Resource load diagram
Resource histogram

Both views are fully synchronized with the main Gantt view and can be easily enabled or disabled by users. They can also be complemented with expanded resource panels that provide a bird’s eye view on how tasks are assigned to a specific project resource, making it much easier to detect inaccuracies and to introduce any changes on the fly. In addition, it is possible to give end-users a clear understanding of resource management productivity by adding such parameters as completeness, workload, and capacity.

One tricky aspect of managing projects is the presence of complex tasks that can be hardly fulfilled with one resource. For instance, such undertakings as house construction can include some demanding tasks like pouring a foundation. This task requires multiple resources of different types (a construction worker and concrete) to be completed in time. It is also interesting to point out that these resources differ not only in their nature but also in measurement units (human resource — hours/day, material — m3). That is where the ability to assign several heterogeneous resources to one task provided by DHTMLX Gantt can come in handy.

Assigning multiple resources to one task

Using this JS component, programmers can integrate the Resource control allowing end-users to add multiple resources and specify their quantity for completing challenging tasks more effectively. Moreover, this control is also utilized to implement searching and filtering options that make it easier to find and show resources allocated to the task.

DHTMLX Gantt also supports the possibility to create working schedules for both project tasks and resources. In such cases when talking about resources, we commonly refer to individual staff members, and tasks assigned to them shape their working calendars. This feature helps to plainly present owners of all allocated tasks.

Resource calendars

If it is needed to reassign a specific task to another employee or introduce any other updates, the Gantt automatically adjusts all timing changes caused by these actions within the whole project. Multiple resources allocated to one task can also form a separate calendar created by the system automatically. When resources (employees) with different working calendars are allocated to a single task, these calendars can be combined into one. It can be applied for assessing the workload for employees with irregular working hours.

Another important resource-related issue that can be handled with DHTMLX Gantt is balancing resource loading via the grouping feature. This extension is intended for grouping project tasks by any of their parameters. For example, if several resources are applied for completing one task, such tasks will be grouped by allocated resources.

Grouping tasks by assigned resources

Thus, tasks are shown with all associated resources at once, excluding their duplications. All unassigned tasks are shown as a separate group.


DHTMLX Gantt can be a great addition to any business application. Its resource management capabilities allow end-users to optimize the distribution and utilization of project resource parameters, thereby helping to avoid overloads and project delays. Despite the fact that DHTMLX Gantt does not calculate the actual resource loading, web developers can set custom behaviors for this purpose and change the way project resources are displayed via a public API. If you want to try DHTMLX Gantt in your project, make use of its free 30-day trial version.

Here we post news about our JavaScript UI libraries. In addition to this, we also share useful tips, news and articles about JavaScript.