{"id":8315,"date":"2021-03-16T13:52:09","date_gmt":"2021-03-16T10:52:09","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=8315"},"modified":"2023-05-02T15:57:59","modified_gmt":"2023-05-02T12:57:59","slug":"set-resource-management-options-dhtmlx-gantt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/set-resource-management-options-dhtmlx-gantt\/","title":{"rendered":"How to Set Up Resource Management Options in DHTMLX Gantt"},"content":{"rendered":"<p>DHTMLX Gantt has gained a great popularity among web developers thanks in large part to its advanced features, and resource management is one of them. It is a vital functionality for many projects when it comes to efficiently utilizing project resources in real time. Our tech support team frequently receives requests for more technical insights on resource planning capabilities with DHTMLX Gantt.<\/p>\n<p>In this post, we\u2019d like to discuss key resource management options of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">JavaScript Gantt component<\/a> highlighted in the new video overview with the help of editable code snippets. <\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/dboAtAsh-DU\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h5>Displaying and allocating resources on-the-fly<\/h5>\n<p>When utilizing DHTMLX Gantt in project management apps, it is possible to show all project resources (i.e. employees, equipment, financial resources, etc.) and their current workload. There are two layout views for this purpose &#8211; resource load diagram and histogram. They are synchronized with the main Gantt chart, therefore it is very easy to balance the workload with drag-and-drop like it is shown in the video and in the <a href=\"https:\/\/snippet.dhtmlx.com\/5\/6c58f6244\" rel=\"noopener\" target=\"_blank\">code snippet<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-usage-diagram-1024x471.png\" alt=\"DHTMLX Gantt - resource usage diagram\" width=\"1024\" height=\"471\" class=\"aligncenter size-large wp-image-8316\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-usage-diagram-1024x471.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-usage-diagram-300x138.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-usage-diagram-768x353.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-usage-diagram.png 1295w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Although the Gantt component allows displaying resource loading and resource allocation, it is important to understand that the <strong>calculation logic must be implemented by developers<\/strong>. But our library provides great possibilities for customization and adding your own solution via a public API.<\/p>\n<h5>Utilizing custom content<\/h5>\n<p>If necessary, you can also complement a resource diagram with custom data or any HTML elements. The <a href=\"https:\/\/snippet.dhtmlx.com\/5\/248a87f90\" rel=\"noopener\" target=\"_blank\">snippet<\/a> gives an example of custom icons applied in the grid of the resource load diagram. To do that, you simply need to modify the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__gantt_grid_file_template.html\" rel=\"noopener\" target=\"_blank\">grid_file<\/a> and <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__gantt_grid_folder_template.html\" rel=\"noopener\" target=\"_blank\">grid_folder<\/a> templates. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-management-custom-content-1024x282.png\" alt=\"DHTMLX Gantt- resource management \" width=\"1024\" height=\"282\" class=\"aligncenter size-large wp-image-8319\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-management-custom-content-1024x282.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-management-custom-content-300x83.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-management-custom-content-768x212.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/Gantt-resource-management-custom-content.png 1499w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h5>Calculating the workload<\/h5>\n<p>Taking advantage of the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__resources.html\" rel=\"noopener\" target=\"_blank\">resource control<\/a>, you can use our Gantt component to assign multiple resources and set their quantity. It is a helpful approach to indicating resource loading on a particular day. But since DHTMLX Gantt does not calculate the actual resource loading, the resource quantity (for example, working hours) will remain unchanged regardless of the number of tasks assigned to the resource for that day. One of the solutions to this kind of issue is to allocate the assigned number of working hours depending on the task duration.<\/p>\n<p>Let us use this <a href=\"https:\/\/snippet.dhtmlx.com\/5\/caac5fc48\" rel=\"noopener\" target=\"_blank\">snippet<\/a> to see how it works in practice. In this example, Anna has 13 hours to complete the \u201cPrepare construction documents\u201d task. The task duration is two days. Thus, Anna can devote 6,5 hours per day to this task to complete it in time. You can specify such a formula in the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__gantt_resource_cell_value_template.html\" rel=\"noopener\" target=\"_blank\">resource_cell_value<\/a> template and apply it to allocate the workload more efficiently.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-workload-calculation-1024x402.png\" alt=\"DHTMLX Gantt - workload calculation\" width=\"1024\" height=\"402\" class=\"aligncenter size-large wp-image-8320\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-workload-calculation-1024x402.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-workload-calculation-300x118.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-workload-calculation-768x301.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-workload-calculation.png 1520w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h5>Displaying hours and tasks per day<\/h5>\n<p>DHTMLX Gantt allows implementing extra functions that facilitate resource loading analysis. This <a href=\"https:\/\/snippet.dhtmlx.com\/5\/03c9bf229\" rel=\"noopener\" target=\"_blank\">snippet<\/a> shows how a resource histogram is used to display workload per day in hours or in tasks depending on the switch position. After each Gantt initialization, this switch is provided with an event listener that keeps track of its position. Each switch action changes the <em>resourceMode<\/em> variable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-Displaying-hours-and-tasks-per-day-1024x281.png\" alt=\"DHTMLX Gantt - Resource Management\" width=\"1024\" height=\"281\" class=\"aligncenter size-large wp-image-8322\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-Displaying-hours-and-tasks-per-day-1024x281.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-Displaying-hours-and-tasks-per-day-300x82.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-Displaying-hours-and-tasks-per-day-768x211.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-Displaying-hours-and-tasks-per-day.png 1532w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>This variable is utilized in several functions, which determine how everything should be calculated. Resource histograms make use of more templates than resource load diagrams: <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__gantt_histogram_cell_class_template.html\" rel=\"noopener\" target=\"_blank\">histogram_cell_label<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__gantt_histogram_cell_allocated_template.html\" rel=\"noopener\" target=\"_blank\">histogram_cell_allocated<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__gantt_histogram_cell_capacity_template.html\" rel=\"noopener\" target=\"_blank\">histogram_cell_capacity<\/a>. This is where the values or bars that need to be displayed are calculated.<br \/>\nYou can easily implement any kind of logic you need for calculating the resource load in DHTMLX Gantt.<\/p>\n<h5>Showing values from the array with dates<\/h5>\n<p>Now we proceed with two snippets illustrating how values are displayed from the array with dates. In our official samples, data for a resource histogram is generated from random values. In the snippets, we assign specific values for each day.<\/p>\n<p>In the first <a href=\"https:\/\/snippet.dhtmlx.com\/5\/a10e81eeb\" rel=\"noopener\" target=\"_blank\">example<\/a>, we assign only one value for each day.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-showing-values-from-the-array-with-dates-1024x357.jpg\" alt=\"DHTMLX Gantt - showing values from the array with dates\" width=\"1024\" height=\"357\" class=\"aligncenter size-large wp-image-8323\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-showing-values-from-the-array-with-dates-1024x357.jpg 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-showing-values-from-the-array-with-dates-300x105.jpg 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-showing-values-from-the-array-with-dates-768x268.jpg 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-showing-values-from-the-array-with-dates.jpg 1894w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>In the second <a href=\"https:\/\/snippet.dhtmlx.com\/5\/ed4aff39a\" rel=\"noopener\" target=\"_blank\">example<\/a>, we can see the current value and the maximum possible value for each day.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-resource-management-showing-values-1024x462.png\" alt=\"DHTMLX Gantt - showing values from the array with dates\" width=\"1024\" height=\"462\" class=\"aligncenter size-large wp-image-8324\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-resource-management-showing-values-1024x462.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-resource-management-showing-values-300x135.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-resource-management-showing-values-768x346.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/DHTMLX-Gantt-resource-management-showing-values.png 1548w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h5>Allocating the capacity in the resource histogram<\/h5>\n<p>Lastly, we should talk about setting the resource capacity in the resource histogram with DHTMLX Gantt. When considering this <a href=\"https:\/\/snippet.dhtmlx.com\/5\/a342d24d0\" rel=\"noopener\" target=\"_blank\">example<\/a>, we can see how the resource capacity is  allocated by days:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image8.png\" alt=\"DHTMLX Gantt - capacity allocation\" width=\"990\" height=\"485\" class=\"aligncenter size-full wp-image-8325\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image8.png 990w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image8-300x147.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image8-768x376.png 768w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/p>\n<p>In fact, the logic is the following: all days except the last one are \u201cfilled\u201d to their maximum capacity. Then, the value for the resources left is calculated for the last day. If the assignment value is less than 8, then it will be fully displayed. If it is greater than 8 and this is the last cell, it will show the remainder of the division by 8.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image7-1024x398.jpg\" alt=\"DHTMLX Gantt - resource management\" width=\"1024\" height=\"398\" class=\"aligncenter size-large wp-image-8326\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image7-1024x398.jpg 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image7-300x117.jpg 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image7-768x299.jpg 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/image7.jpg 1554w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h5>Final words<\/h5>\n<p>If you plan to use DHTMLX Gantt in real projects and would like to implement the calculation logic for the resource usage, we&#8217;ve got you covered. Our rich collection of <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/samples\/11_resources\/\" rel=\"noopener\" target=\"_blank\">samples<\/a> will help you to create your own custom solution with minimum time and effort.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt trial version<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt documentation<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/playlist?list=PLKS_XdyIGP4MEW6yvvQUZT8vJKHVOq2S0\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt video tutorials<\/a><\/li>\n<\/ul>\n<p><meta name=\"twitter:card\" content=\"summary_large_image\"><br \/>\n<meta name=\"twitter:image\" content=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/03\/resource-management-dhtmlx-gantt-chart.png\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>DHTMLX Gantt has gained a great popularity among web developers thanks in large part to its advanced features, and resource management is one of them. It is a vital &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":8327,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,20,14],"class_list":["post-8315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-gantt","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/8315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=8315"}],"version-history":[{"count":9,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/8315\/revisions"}],"predecessor-version":[{"id":8734,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/8315\/revisions\/8734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/8327"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=8315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=8315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=8315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}