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.

<script src="";></script> 
<script type="text/javascript" src="";></script>

 #chart_wrapper {
    overflow-x: scroll;
        overflow-y: scroll;
    width: 1200px;
        height: 800px;

<script type="text/javascript">

$(document).ready(function() {
       google.charts.load('current', {'packages':['timeline']});
function drawCalendar() {
  var oDataUrl = "#hiding the actual url from sharepoint"; 
                url: oDataUrl,
                type: "GET",
    dataType: "json",
                headers: {
                        "accept": "application/json; odata=verbose"
                success: calendarSuccessFunction,
                error: errorFunction
function calendarSuccessFunction(data) {
        try {
          var chart = new 
          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);
                     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
  catch (e) {
function errorFunction(data, errCode, errMessage) {
        console.log("Error: " + errMessage);


 <h1>MAC Timeline</h1>
    <div id="chart_wrapper">
             <div id="timeline"></div>

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 view this discussion on the web visit

Reply via email to