65927

How to set event for Google chart?

Question:

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 <strong>Magnolia Room</strong> alert("Magnolia Room clicked");<br /> Google chart link:<br /><a href="https://developers.google.com/chart/interactive/docs/gallery/timeline" rel="nofollow">Google Timeline Chart</a><br /> 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??

Answer1:

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.

Recommend

  • CSV data loading give Not enough columns given to draw the requested chart
  • Pie chart using mysql and php
  • Google Chart horizontal scrolling
  • why “google is not defined ” when i load google js api
  • Google Charts API custom month names
  • Highcharts unable to destroy labels
  • Google Geochart - same countries, different values
  • Showing dates where there are no values in Google Charts
  • Applying Script Library for Timeline
  • jquery table row selector based on user input
  • laravel 4 install issue when using composer install
  • Flash Components with Flex SDK
  • Google Column Chart with multiple background zones
  • SVG background not displaying in Safari
  • Symfony2 - Composer class loader instance in controller
  • adding item to window Extjs 4
  • Install phpMongo Drivers on windows
  • pillow imaging ImportError
  • Combining two different ActiveRecord collections into one
  • as3-flash: any way to access all the instances placed in different frames from document class?
  • Select options in sencha touch is not working for android
  • Problems installing Yesod for Haskell
  • error importing numpy
  • does jqgrid support a multiple checkbox list for editing
  • Optimizing database types to compact database (SQLite)
  • Cross-Platform Protobuf Serialization
  • Do I've to free mysql result after storing it?
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • Turn off referential integrity in Derby? is it possible?
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?