Full HTML Page Example

An end-to-end example for creating a web page with visualization charts embedded in it.
It also demonstrates a chart connected to Google Spreadsheets
and two charts interacting using visualization Events.

The example displays a simple statistics page for popular movies and
cinema locations of a make-belief cinema chain company.

The page includes a Map and a
Table visualization that
interact with each other to display the theater locations.
The page includes a column chart displaying the number of tickets each movie
sold per location. It derives its data from a Google Spreadsheet.
The published version of this
spreadsheet can be viewed for completeness.

[This section requires a browser that supports JavaScript and iframes.]

Query Wrapper Example

This example demonstrates how to create a JavaScript object that wraps many
aspects of sending a query for you. This object, called QueryWrapper,
is instantiated with a query string, a handle to a visualization, and a
set of options for the visualization. It exposes one method to external callers,
sendAndDraw(), which sends the query string, handles the response, and either calls
draw() on the visualization, or displays an error message if the query
returned an error. The host page here displays the results in an org chart visualization.

Table Query Wrapper Example

This is an example demonstrating how to display a large data set in a paged table
visualization without fetching all the data in a single request. This is
useful when there is a large amount of data and you want to avoid
the overhead of requesting or storing all the data at once on your page.

The JavaScript defines an object, TableQueryWrapper, which manages the google.visualization.Query object
to make the requests, as well as the table visualization, to handle sorting and
pagination. The object is instantiated with the google.visualization.Query instance,
a handle to the page element
used to hold the visualization and any errors it throws, and any options to pass
into the draw() method (including the number of rows to fetch,
as the pageSize option). This object manages the table visualization
by catching and handling paging and sorting events.

When
the user pages forward or backward, TableQueryWrapper handles the event by creating
and sending a new query with appropriate LIMIT and OFFSET values
to repopulate the table page. Similarly, when the user clicks a column to change
the sort order, the TableQueryWrapper handles the event by creating and sending
a new query with an appropriate ORDER
BY clause, and resets back to offset 0.

In the following example, the dropdown box enables you to select the number
of table rows to show. If changed, the host page creates a new TableQueryWrapper
instance, then sends a new query with a LIMIT clause reflecting the number of rows
selected, and no OFFSET clause (that is, it jumps back to the first row).