Adding onmouseover or onmouseout events to the new Timeline

937 views
Skip to first unread message

cline work

unread,
Aug 23, 2013, 3:42:59 PM8/23/13
to google-visua...@googlegroups.com
The documentation states that you can get a handle to the onmouseover and onmouseout events as mentioned here:  https://developers.google.com/chart/interactive/docs/gallery/timeline#Events

I tried adding the onmouseover in two places but it's never triggered.

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['timeline']});
    </script>    
    
    
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('example6.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Washington', 'George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'Adams',      'John Adams',        new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
    [ 'Jefferson',  'Thomas Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  google.visualization.events.addListener(chart, 'ready', function() {
    alert('ready');
    
    google.visualization.events.addListener(chart, 'onmouseover', function() {
      alert('onmouseover');
    });
  });
  
   google.visualization.events.addListener(chart, 'onmouseover', function() {
    alert('onmouseover');
  });
  
  chart.draw(dataTable); 
     
}
</script> 
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <table>
      <tr>
        <td>
          <div id="example6.1" style="width: 300px; height: 300px;"></div>
        </td>        
      </tr>
    </table>
  </body>
</html>
​

asgallant

unread,
Aug 23, 2013, 4:40:53 PM8/23/13
to google-visua...@googlegroups.com
It would appear that the mouse events are not firing.  You can file a bug report on it here.
Reply all
Reply to author
Forward
0 new messages