Google visualization timeline to show mouse cursor - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Google visualization timeline to show mouse cursor

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Timeline Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="timeline" style="height: 180px;"></div> 
      <input id="test"> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {//  ww w .  j  a v  a2 s.  co  m
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
        var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
              google.visualization.events.removeListener(runOnce);
              $(container).mousemove(function (e) {
                var xPos = e.pageX - container.offsetLeft;
                var yPos = e.pageY - container.offsetTop;
                $('#test').val(xPos + ', ' + yPos);
            });
        });
        chart.draw(dataTable);
      }

      </script>  
   </body>
</html>

Related Tutorials