My timeline contains a lot of events over a long period of time. To solve this and make it fit on a web page I added a vertical and horizontal scroll bar. However, when I scroll, the labels from the left hand side don't move with the data.
My goal is to find a way to freeze that first label column as the user scrolls to look at the events over time.
Below is my code as reference. Thanks.
<html>
<head>
<style>
#chart_wrapper {
overflow-x: scroll;
overflow-y: scroll;
width: 1200px;
height: 800px;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function() {
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawCalendar);
});
function drawCalendar() {
var oDataUrl = "#hiding the actual url from sharepoint";
console.log(_spPageContextInfo);
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json; odata=verbose"
},
success: calendarSuccessFunction,
error: errorFunction
});
}
function calendarSuccessFunction(data) {
try {
console.log(data);
var chart = new google.visualization.Timeline(document.getElementById('timeline'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Name'});
dataTable.addColumn({type: 'string', id: 'DateOfEvent'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
var date = new Date(); //creates a date for the current date to then find dates only after today
for (var i = 0; i < data.d.results.length; i++)
{
var item = data.d.results[i];
var end = new Date(item.EndDate);
if(end>=date){
var name = item.Title +" ("+ item.Location +")";
var start = new Date(item.EventDate);
var day = start.getMonth()+1 +"/"+ start.getDate() +"/"+ start.getFullYear();
dataTable.addRow([name, day, start, end]);
}
}
var options = {
timeline: { colorByRowLabel: true, barLabelStyle: {fontSize: 8, color: 'black'}, rowLabelStyle: {fontSize: 12, color: 'green'} },
avoidOverlappingGridLines: false,
width: 3200
};
chart.draw(dataTable,options);
}
catch (e) {
//alert(e.message);
}
}
function errorFunction(data, errCode, errMessage) {
console.log("Error: " + errMessage);
}
</script>
<body>
<h1>MAC Timeline</h1>
<div id="chart_wrapper">
<div id="timeline"></div>
</div>
</body>
</html>