How to create histogram in bottom of gantt chart

Gantt React Gantt
#1

Capture
Capture989×347 48 KB

I want to create bottom panel / histogram in gantt chart. this histogram is dependent on rest api its not dependent on gantt chart data. How to create this separate histogram connected with rest api instead of gantt chart data.

#2

Hello,
Unfortunately, this functionality in React version of Dhtmlx Gantt chart is not available. If you are using a JS Gantt, to create a histogram in a Gantt chart, you need to change gantt.config.layout and parse the data in the created resource data store. Here are the related articles:
https://docs.dhtmlx.com/gantt/desktop__resource_management.html#resourcecalendars:~:text=the%20Resource%20diagram-,Resource%20histogram,-This%20type%20of ;
https://docs.dhtmlx.com/gantt/api__gantt_layout_config.html ;
https://docs.dhtmlx.com/gantt/api__gantt_createdatastore.html ;
You can create your own functions to calculate your data. For example:

function getAllocatedValue(start_date, resource) {
    const array = resource["ReqAvil"];
    for (let i = 0; i < array.length; i++) {
        let req = array[i];
        let date = gantt.date.parseDate(req["Date"], "%Y-%m-%d");
        if (+date == +start_date) return req["AvailCapacity"]
    }
}

function getCapacity(start_date, resource) {
    const array = resource["ReqAvil"];
    for (let i = 0; i < array.length; i++) {
        let req = array[i];
        let date = gantt.date.parseDate(req["Date"], "%Y-%m-%d");
        if (+date == +start_date) return req["ReqCapacity"]
    }
}

You can use these functions in the templates to show the values:

gantt.templates.histogram_cell_label = function(start_date, end_date, resource, tasks) {
  let allocated = getAllocatedValue(start_date, resource) || "0";
  let capacity = getCapacity(start_date, resource) || "0";
  
  return allocated + "/" + capacity;
};

Note, there is no way to load resources directly from the database as Gantt is a client-side solution. But you can download them directly from the server using one data source (tasks, links and resources) with the help of collections.
Please check the example of how it might be implemented:
https://snippet.dhtmlx.com/2vuv3oix