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

  • 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.

Ways to Visualize Resource Loading

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.

Managing One Task with Multiple Resources

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.

Working Calendars for Project Resources

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.

Grouping Tasks by 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.


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