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> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js";></script> <script type="text/javascript" src=" https://www.gstatic.com/charts/loader.js";></script> <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> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/748cb02d-ea64-4212-9a59-8f7be225491d%40googlegroups.com.
