I try to create a Ganttchart from a PHP array.
My PHP Code looks like:
<?php
$ganttData = [
['Project Start', 'Project Start', '2023-08-01', '2023-08-02'],
['Gate1', 'Gate1', '2023-08-28', '2023-08-28'],
['Gate2', 'Gate2', '2024-01-30', '2024-03-04'],
['PD Start', 'PD Start', '2024-03-04', '2024-03-04']
];
// Encode data to JSON
$ganttDataJson = json_encode($ganttData);
?>
The HTML / Javascript looks like:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
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('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
var ganttData = <?php echo $ganttDataJson; ?>;
ganttData.forEach(function(row) {
// Split the date string into year, month, and day
var startDateParts = row[2].split('-');
var endDateParts = row[3].split('-');
// Convert date string to Date object
row[2] = new Date(parseInt(startDateParts[0]), parseInt(startDateParts[1]) - 1, parseInt(startDateParts[2]));
row[3] = new Date(parseInt(endDateParts[0]), parseInt(endDateParts[1]) - 1, parseInt(endDateParts[2]));
// Calculate duration in milliseconds
var startDate = new Date(row[2]);
var endDate = new Date(row[3]);
var durationInMilliseconds = endDate.getTime() - startDate.getTime();
row[4] = durationInMilliseconds;
});
data.addRows(ganttData);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I get always an error message. "Invalid data table format: column #5 must be of type 'number'.×" As I don't have a lot of experience with javascript, I appreciate your help.
durationInMilliseconds?var startDate = new Date(row[2]);-row[2]here is already a Date instance, no need to create a new one from it. And the whole// Split the date string into year, month, and dayis also not necessary -YYYY-MM-DDis a format the Date constructor parses perfectly fine.