DhtmlxGantt is a full-featured Gantt chart for cross-browser and cross-platform applications. Can meet all the needs of project management applications, is the most complete Gantt chart library. It allows you to create dynamic Gantt charts and visualize project progress in a convenient graphical way. With dhtmlxGantt, you can show dependencies between activities, show current task status with percentage completed shadows, and organize activities into a tree structure.

Click here to download the trial version of dhtmlxGantt

DHTMLX Gantt has won great popularity among Web developers, thanks in large part to its advanced features, of which resource management is one. It is a critical function for many projects when it comes to effectively utilizing project resources in real time. Our technical support team regularly receives requests for more technical insights on resource planning capabilities using DHTMLX Gantt.

Display and allocate resources in real time

When you use DHTMLX Gantt in a project management application, you can display all project resources (that is, staff, equipment, financial resources, etc.) and their current workload. To do this, there are two layout views – the resource load diagram and the histogram. They are synchronized with the main Gantt chart, making it easy to balance the workload by dragging and dropping, as shown in the video and code snippet.

Although the Gantt component allows you to show resource loading and resource allocation, it is important to understand that the computing logic must be implemented by the developer. But our library offers great possibilities for customizing and adding your own solutions through a public API.

Leverage custom content

If necessary, you can also supplement the resource graph with custom data or any HTML element. This section provides a sample example that is applied to the grid of a resource load graph. To do this, you only need to modify the Grid_file and grid_Folder templates.

Calculated workload

With resource control, you can use our Gantt chart component to allocate multiple resources and set their number. This is a useful way to indicate the load of a resource on a particular date. But because DHTMLX Gantt does not calculate the actual resource load, the number of resources (for example, working hours) remains the same regardless of the number of tasks allocated to the resource for that day. One way to solve this problem is to allocate allocated work time based on the duration of the task.

Let’s use this snippet to see how it works in practice. In this example, Anna has 13 hours to complete the “Prepare construction documents” task. The mission will last two days. As a result, Anna was able to devote 6.5 hours a day to the task in order to get it done in time. You can specify such a formula in the resource_cell_value template and then apply it to allocate the workload more efficiently.

Hours and tasks are displayed each day

DHTMLX Gantt allows you to implement additional features that aid in resource load analysis. This code snippet shows how to use a resource histogram to show the amount of work per day (in hours) or in a task (depending on the switch position). After each Gantt initialization, this switch provides an event listener to track its position. Each switch operation changes the resourceMode variable.

This variable is used in multiple functions that determine how everything should be evaluated. Allocated Resource histograms use more templates than resource load diagrams: histogram_cell_label, histogram_cell_allocated, histogram_cell_capacity. Calculate the values or bars you want to display here.

Displays values in an array with dates

Now, let’s do two summaries that show how to display values from arrays with dates. In our official sample, the resource histogram data is generated from random values. In the code snippet, we assign specific values for each day.

In the first example, we assigned only one value per day.

In the second example, we can see the current and maximum possible values for each day.

Allocates capacity in the resource histogram

Finally, we should discuss setting resource capacity in the resource histogram using DHTMLX Gantt. When considering this example, we can see how resource capacity is allocated on a daily basis:

In fact, the logic goes like this: All days except the last are “filled” to maximum capacity. Then, the value of the resources remaining on the last day is calculated. If the assigned value is less than 8, the value is fully displayed. If greater than 8, and this is the last cell, the remainder of dividing by 8 is displayed.

The last

If you plan to use DHTMLX Gantt in a real project and want to implement computational logic for resource use, we’re here for you. Our rich collection of samples will help you create your own custom solutions with minimal time and effort.

Recommended products:

**VARCHART XGantt: ** supports C# gantt chart controls for ActiveX,.net and other platforms

**AnyGantt: ** Ideal tool for building complex and rich Gantt charts

**jQuery Gantt Package: ** Cross-platform jQuery Gantt Package based on HTML5 / jQuery

**phGantt Time Package: ** Gantt chart for task and Time allocation management