Custom Gantt widget

1

Hello Expert,
I am implementing Gantt chart custom widget in my application using, google chart library.
its working fine, but as per new requirement I am trying to modify the JAVA Script code.

Java Script Code is below,

google.charts.load(“current”, { packages: [“gantt”] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(“string”, “Task ID”);
data.addColumn(“string”, “Task Name”);
data.addColumn(“string”, “Resource”);
data.addColumn(“date”, “Start Date”);
data.addColumn(“date”, “End Date”);
data.addColumn(“number”, “Duration”);
data.addColumn(“number”, “Percent Complete”);
data.addColumn(“string”, “Dependencies”);

jsonData = getValue(“B”);
const dataArray = jsonData[“JSON Data”];
const rows = ;

// Map and get individual data
dataArray.forEach((item, index) => {
const seq = item[“Sequence Order”];
const wo = item[“WO”];
const startTime = item[“Start Time”];
const endTime = item[“End Time”];
const percentageComplete = item[“Percent Complete”];

rows.push([
  seq.toString(),
  wo,
  null, // Resource
  new Date(startTime.timestamp),
  new Date(endTime.timestamp),
  null, // Duration
  percentageComplete,
  null, // Dependencies (you can set this to null if needed)
]);

console.log(JSON.stringify(startTime));
console.log(startTime.timestamp);
console.log(new Date(startTime.timestamp));
console.log(JSON.stringify(endTime));
console.log(endTime.timestamp);
console.log(new Date(endTime.timestamp));

});

// Add all rows to the DataTable
data.addRows(rows);

/*
// test data
data.addRows([
[‘2014Spring’, ‘Spring 2014’, ‘spring’,
new Date(2023, 11, 3, 2, 0, 0), new Date(2023, 11, 3, 4, 0, 0), null, 100, null],
[‘2014Summer’, ‘Summer 2014’, ‘summer’,
new Date(2023, 11, 3, 4, 0, 0), new Date(2023, 11, 3, 6, 0, 0), null, 100, null],
[‘2014Autumn’, ‘Autumn 2014’, ‘autumn’,
new Date(2023, 11, 3, 6, 0, 0), new Date(2023, 11, 3, 8, 0, 0), null, 100, null],
[‘2014Winter’, ‘Winter 2014’, ‘winter’,
new Date(2023, 11, 3, 8, 0, 0), new Date(2023, 11, 3, 10, 0, 0), null, 100, null]
]);
*/

var options = {
height: 400,
gantt: {
trackHeight: 30,
},
};

var chart = new google.visualization.Gantt(
document.getElementById(“chart_div”)
);

chart.draw(data, options);
}

Requirement:
I want to display one more parameter when I am clicking on Bar chart.
image
new parameter is Quantity.

Regards,
Kiran Kale