Vertical reference line in google timeline visualization - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Vertical reference line in google timeline visualization

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ReferenceLine on Timeline</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  w  w  w .  j a  va2 s.  co m
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]]);
  chart.draw(dataTable);
  nowLine('timeline');
  google.visualization.events.addListener(chart, 'onmouseover', function(obj){
     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){
   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'))}
  })
   var nowWord = $('#' + div + ' text:contains("Now")');
  nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
}
    });

      </script> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials