Stay organized with collections Save and categorize content based on your preferences.
Your visualization can fire events that a host page can register to receive. Events can be fired by user actions: for example a user clicks on a chart, or can be internal: for example, firing an event every 10 seconds. You can register a Javascript method to be called whenever certain events are fired, possibly with data specific to that event.
Every visualization defines its own events, and the documentation for that visualization should describe when each event is fired, what it means, and what information it sends to your event handler (for example, see the orgchart visualization). This page describes how a visualization creator can fire events. To learn how clients can register to receive events, see the Handling Events page.
There is one event that any selectable visualization should fire: the select event. However, the behavior and meaning of this event is defined by each visualization.
If a visualization is not ready for interaction immediately after the draw
method returns control to the user, the visualization should fire: the ready event. The exact behavior and meaning of this event is defined in The Ready Event section.
It is important to note that the Visualization API events are separate and distinct from the standard DOM events.
Contents Firing an EventTo fire an event from your visualization, call the google.visualization.events.trigger()
function. The function expects the following parameters:
this
value).The following example shows how a visualization throws the select event:
MyVisualization.prototype.onclick = function(rowIndex) { this.highlightRow(this.selectedRow, false); // Clear previous selection this.highlightRow(rowIndex, true); // Highlight new selection // Save the selected row index in case getSelection is called. this.selectedRow = rowIndex; // Fire a select event. google.visualization.events.trigger(this, 'select', {}); };
Hosting pages can register to receive your events by calling google.visualization.events.addListener()
or google.visualization.events.addOneTimeListener()
. Be sure to document thoroughly any events that you fire.
The "select" event is a standard event thrown by many visualizations in response to a user mouse click. If you choose to fire an event in response to mouse clicks, you should implement the "select" event in the standard way described here:
getSelection()
method as described in the linked document section. This method should return the indexes of data elements that the user selected. setSelection()
method as described in the reference section. Also see the handling events page to learn how to handle events.Any visualization should fire a "ready" event that works in a standard way to let the developer know when the visualization is ready to process called methods. (However, there is no absolute requirement that a visualization behave this way; check the documentation for your visualization).
In general, visualizations that expose the "ready" event are designed with the following specifications:
draw
method ends.draw
method, because otherwise the event might be fired before the listener is set up and you will not catch it.The convention is that visualizations which do not fire a "ready" event are ready for interaction immediately after the draw
method ends and returns control to the user.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-10 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-10 UTC."],[[["Visualization creators can fire custom events or standard events like 'select' and 'ready' using `google.visualization.events.trigger()`."],["The 'select' event is fired when a user interacts with data, requiring `getSelection()` and `setSelection()` methods for data retrieval and manipulation."],["The 'ready' event signals that a visualization is ready for user interaction, typically fired after the `draw()` method completes; any interaction before this event might not work as expected."],["Host pages can listen for these events using `google.visualization.events.addListener()` or `google.visualization.events.addOneTimeListener()` to respond accordingly."],["While each visualization defines its own events, the 'select' and 'ready' events follow specific guidelines for consistency and usability."]]],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4