Freezing Timeline Labels

35 views
Skip to first unread message

Tate Dyer

unread,
Jan 14, 2020, 1:19:50 PM1/14/20
to Google Visualization API
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>
Reply all
Reply to author
Forward
0 new messages