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');
}

@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! :)