Visualizations fall into two categories, static and interactive. Static visualizations are simply pictures that do not include controls or manipulation capabilities for the viewer. Conversely, an interactive visualization allows the viewer to manipulate data views, cause events, and otherwise have a dynamic interaction with the visualization.
A static chart is a snapshot view of data. The viewer cannot manipulate the chart, other than viewing details through simple mouse-over windows. Chart types that generally fall into the Static category are as follows:
- Line charts
- Pie charts
- Bar graphs
- Candlestick charts
- Geography maps and charts
- Scatter plots
- Basic tables
- Tree maps
- Organizational charts
However, note that Static charts may be transformed into Interactive charts by adding dashboard controls, which is a topic covered in detail in Chapter 7, Dashboards, Controls, and Events.
Interactive charts allow the viewer to manipulate the display properties of the chart's data. Often these visualizations are built from simpler static charts, with controls added to allow the viewer interaction. However, there are also charts that are capable of referencing a timeline to provide data representation over a given period of time. Interactive data observation over time can be accomplished by using either the motion chart or timeline chart. Also, advanced interactive map charts that are timeline driven can be rendered using the Maps API.
A dashboard is the inclusive name given to a set of controls presented to the viewer with which the viewer is able to manipulate the visualization in order to get his/her own desired views of the data. Dashboards usually include one or more filters to allow for end user data viewing control.
The string filtering option is equivalent to providing a contained search option to the chart's end user. Data displayed, in whatever chart format, will be restricted based on the string entered in the field. Results filtered by the string are real time.
The number range slider allows the viewer to select a range of values from the dataset to display. The chart view will reflect the restriction of values set by the slider. Parameters set by the slider are real time.
The chart range slider allows users to select a smaller section of a larger chart in order to gain a more detailed view. The slider parameters are drag-and-drop on either side of the selected area. Rendering for the selected chart area is real time.
The number range slider, combined with one or more preset button selections allows programmatic filtering of data into methods. The range of the slider itself is determined by the maximum and minimum values of the associated dataset. The text on the button is defined using HTML definitions within the <body> tag. The range of data viewed can be set by dragging the number range handles to the desired range, in the same way as manipulating a standard number range bar. The number range can also be configured by clicking on the preset button (the Select range [15, 27] button in the following screenshot), to set pre-configured values. Buttons can also be used to set the visualization properties.
Category filters allow chart users to selectively view data based on categories presented in the drop-down menu. In the following example, books will only be viewed in the corresponding chart if they fall into the categories of Non-Fiction and Biographies. The categories presented for filtering are defined by specifying a column in the data table.
The dependency filter allows data to be viewed in a drilldown method. Each subsequent set of options for selection is dependent on the previous drop-down selection. The data displayed on the visualization is pared down accordingly with each additional selection from the filter list. Similar to button definitions for programmatic filtering, the drop-down IDs for each filter are created inside the <body> tags and then referenced in the API script.
In general application programming, event handling is a structured method of programmatically reacting to user interactions. Event handling is a key tool in the creation of interactive charts because it allows a variety of feedback opportunities to the user.
It is possible to trigger events by making a selection on a table display. For example, selecting a row in a table can trigger a browser alert and message to the viewer of the chart. It is also possible to configure the title bar of a chart to sort data in a specified order. The corresponding chart visualization will display the data in the order that was sorted in the table. Similarly, a chart may be the source of a user click, with the corresponding table row being selected by the user's action.
Visualizations can also be programmed to be rendered on the command of the viewer. For example, a button on an HTML page can be programmed to wait for a user click in order to initiate the rendering of a chart. The resulting actions after the button click may also set formatting parameters, initiate sending alert messages to the user, or even initiate additional events.
Errors are a form of events, and all well-written applications should include some method of error handling. Google provides an error handling namespace included in the Visualization API. The google.visualization.errors namespace provides static functions that allow the developer to display error messages to the user, if necessary.
Note
You can find Error Handling Documentation at https://developers.google.com/chart/interactive/docs/reference#errordisplay.
There are two types of visualizations intended to display data that changes over a period of time. These charts are the annotated timeline chart and the motion chart.
The annotated timeline chart is as its name describes, and it displays annotations of specific points on a line chart over time. Each annotation can be documented with detailing text, which appears in the right-most column. Moving a set of sliders across the bottom range viewer can specify a magnified view of a point in time on the timeline.
The motion chart maps the changes of one or more variables over time on a defined axis. There are a number of user-defined controls available to manipulate the chart during viewing. The following example of a motion chart depicts the population of three U.S. states between the years 2000-2010. The segment of each state's population that is of age 18 and over is signified by the size of the motion trail. The bottom segment of each motion trail represents the population of each state under the age of 18. The upper portion of the motion trail signifies the total number of persons over the age of 18.
