Reference Line in Google Charts Timeline

chart.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="chart.js"></script>
<div id="timeline" style="height: 240px;"></div>

chart.js

google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  //variables for the start of yesterday, today, and tomorrow 
  var today = new Date();
  today.setHours(0,0,0,0);
  var yesterday = new Date();
  yesterday.setDate(today.getDate() - 1);
  yesterday.setHours(0,0,0,0);
  var tomorrow = new Date();
  tomorrow.setDate(today.getDate() + 1);
  tomorrow.setHours(0,0,0,0);
  var dayAfterNext = new Date();
  dayAfterNext.setDate(tomorrow.getDate() + 1);
  dayAfterNext.setHours(0,0,0,0);
  
  //add columns to timeline
  dataTable.addColumn({ type: 'string', id: 'Date' });
  dataTable.addColumn({type: 'string', id:'Description'})
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  
  //add rows to the timeline
  dataTable.addRows([
  	['\0', 'Now', new Date(), new Date()],
    [ 'Yesterday', '', yesterday, today ],
    [ 'Today', '', today, tomorrow ],
    [ 'Tomorrow', '',  tomorrow, dayAfterNext]]);

	//draw the chart, like you usually would
  chart.draw(dataTable);
  
  //draw the reference 'now line' in your chart.
  //the passed-in variable is the name of the div for the timeline in your html
  nowLine('timeline');
  
  //create listeners to redraw the line every time a normal google graph event happens to it
  //(which would otherwise revert it back to how it was to start)
  google.visualization.events.addListener(chart, 'onmouseover', function(obj) {
  
  	//if the moused over object was our reference line, we should not display a tooltip
    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){
	
  //calculate the total height of the timeline chart
	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'))}
  })
  
  //font and color for the text next to the reference line
	var fontSize = '11px';
	var fillColor = 'A6373C';
  
  //get the word 'Now' that appears on your chart next to your reference line
  //you can change this word on your chart just make sure to update it here as well
	var nowWord = $('#' + div + ' text:contains("Now")');
	nowWord.css('font-size', fontSize).attr('fill', fillColor);
  
	//change the shape and size of the actual reference line
	nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
}

This gist contains a sample for creating a reference line in a Google Charts Timeline.

The example that I use charts where we are in time in relation to yesterday, today, and tomorrow. It can be used in any way that an ordinary timeline can be used though.

The biggest problem with this method is that mousing over the drawn reference line will cause the line to 'flicker' as it changes back to what it originally looked like.

I tried to add the following lines after the last line in the function nowLine(div)

        $('#' + div + '  text:contains("Now")').each(function(idx, value) {
            if (idx == 0) {
                $(value).parent().find("rect").first().removeAttr("style");
            } else if (idx == 1) {
                $(value).parent().find("rect").first().attr("style", "display:none;");
            }

        });

It can remove the "Flicker" event by removing the default style event in that line. However, it is not a good practice since it seems hacking the css. Hope there is a better way to add the vertical line in the future.

@charlesng nice, yeah the flicker can be annoying. Also I agree that the whole thing to create a reference line is hacky...I would have imagined that the charts library would have it as a feature built in! Hopefully in the future it can be done with a single library call! :)