I have dynamic data coming for the google gantt chart. I want to add hyperlink option for the Y-axis data which will navigate me to the other page.
The code given below have the dynamic data. Task name in the Y-axis needs to be in an hyperlink. On-click the hyperlink it should navigate to the other page.
google.charts.load('current', {
packages:['gantt']
}).then(function () {
var container = document.getElementById('gantt');
var chart = new google.visualization.Gantt(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'ModelId');
dataTable.addColumn('string', 'TaskName');
dataTable.addColumn('date', 'startDate');
//dataTable.addColumn('date', 'draftDate');
dataTable.addColumn('date', 'endDate');
dataTable.addColumn('number', 'PercentComplete');
dataTable.addColumn('number', 'Duration');
dataTable.addColumn('string', 'Dependencies');
var data = [{
"ModelId":"1034",
"TaskName": "Model 1",
"startDate":"10-Aug-2020",
"endDate":"20-Aug-2020",
"draftDate":"14-Aug-2020",
"Duration":null,
"PercentComplete":100
},
{
"ModelId":"1035",
"TaskName": "Model 2",
"startDate":"10-Sep-2020",
"endDate":"20-Dec-2020",
"draftDate":"14-Oct-2020",
"Duration":null,
"PercentComplete":100
}];
data.forEach(function (row) {
console.log(data);
dataTable.addRow([
row.ModelId, // 'Task ID'
row.TaskName, // 'Task Name'
new Date(row.startDate), // 'Start Date'
// new Date(row.draftDate), // 'Draft Date'
new Date(row.endDate), // 'End Date'
row.PercentComplete, // 'Percent Complete'
row.Duration,
null // 'Duration'
]);
console.log("hii");
});
window.addEventListener('resize', drawChart, false);
drawChart();
var dateRangeStart = dataTable.getColumnRange(2);
var dateRangeEnd = dataTable.getColumnRange(3);
var formatDate = new google.visualization.DateFormat({
pattern: 'MM/dd/yyyy'
});
var rowHeight = 45;
var options = {
height: ((dataTable.getNumberOfRows() * rowHeight) + rowHeight),
gantt: {
palette: [
{
"color": "#4cc9ac",
"dark": "#4cc9ac",
"light": "#4cc9ac"
}
]
}
};
function drawChart() {
chart.draw(dataTable, options);
}
});
//HTML Code:
<html>
<body>
<div id="gantt"></div>
</body>
</html>
Looking forward for the answer. Thanks in advance!