I have made a simple timetable using Google Charts, although right now i use DataTable inside the code. Instead i want to use Google Spreadsheet as the source.
But i am struggling even though i follow https://developers.google.com/chart/interactive/docs/spreadsheets. I dont quite understand in which format should my datas be in the spreadsheet (such as columns and rows)
Here is the code:
<head>
<h1>Vehicle Plan Time Table</h1>
<style>
h1 {
color: #3e74ab;
text-shadow: 1px 1px;
font-family: "Times New Roman", Times, serif;
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timechart');
var chart = new google.visualization.Timeline(container);
var options = {
colors: ['#113477', '#C0C0C0','#adc6e5', '#72aae4','#518cc2','#4A7FB0'],
timeline: { rowLabelStyle: {fontName: 'Arial', fontSize: 20, color: '#0000' },
barLabelStyle: { fontName: 'Times New Roman', fontSize: 25 } },
'width':2650,
'height':1200,
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ Date(), 'Now', new Date(), new Date()],
[ 'Project #1', 'F2', new Date(2022, 10, 30), new Date(2022, 11, 30) ],
[ 'Project #1', 'F3', new Date(2022, 11, 30), new Date(2023, 5, 17) ],
[ 'Project #1', 'F3.1', new Date(2023, 5, 17), new Date(2023, 9, 29) ],
]);
chart.draw(dataTable,options);
nowLine('timeline');
google.visualization.events.addListener(chart, 'onmouseover', function(obj){
if(obj.row == 0){
$('.google-visualization-tooltip').css('display', 'none');
}
nowLine('timeline');
})
google.visualization.events.addListener(chart, 'onmouseout', function(obj){
nowLine('timeline');
})
}
function nowLine(div){
var height;
$('#' + div + ' rect').each(function(index){
var x = parseFloat($(this).attr('x'));
var y = parseFloat($(this).attr('y'));
if(x == 0 & y == 0) {height = parseFloat($(this).attr('height'))}
})
var nowWord = $('#' + div + ' text:contains("Now")');
nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
}
</script>
<div id="timechart" style="height: 400px;"></div>