How to set event for Google chart?

问题

Hi I am using Google API to draw chart but I want to set event for each row of this table but I don't know how should I collect this element for example I wanna set event that whenever clicked in Magnolia Room alert("Magnolia Room clicked");
Google chart link:
Google Timeline Chart
here is google javascript chart code:

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
    <script type="text/javascript">

        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('example5.3');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'string', id: 'Room' });
            dataTable.addColumn({ type: 'string', id: 'Name' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
                [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
                [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
                [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
                [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Petunia Room',   'App Engine',          new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]);

            var options = {
                timeline: { colorByRowLabel: true },
                backgroundColor: '#ffd'
            };

        chart.draw(dataTable, options);
    }
</script>

And My HTML:

<!DOCTYPE html>
<html>
  <head>
     <title>sample</title>
  </head>
  <body>
     <div id="example5.3" style="width: 900px; height: 200px;"></div>
  </body>
</html>

Is there any way to set an event for them??

回答1:

You can use a "select" event handler to do this:

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length) {
        alert(dataTable.getValue(selection[0].bb, 0) + ' clicked');
    }
});

Please note that the selection info is currently bugged; the selection objects should have row and column properties, but those properties are obfuscated, so for now you have to access the row indices from the bb property. The Timeline visualization sets the column index to null for all selections, so you don't need to worry about that one.

来源：https://stackoverflow.com/questions/24839774/how-to-set-event-for-google-chart

标签

javascript

jquery

charts

google-visualization