This chapter covers several advanced topics concerning the Google Visualization API. Some examples may have multiple approaches, while others are bound to a specific method. In fact, more than one of the complex charts presented can also be created using either spreadsheets or code. Although the charts themselves may require very little code, they do require various types of data to be formatted as per specifications. Additionally, advanced charts often require a handful of settings to be configured in order to render the chart drawing at all. Good examples of chart requiring particular care with data organization are time-based charts and intensity maps. Often these types of charts appear complex, but most of the complexity has been encapsulated in the visualization code itself. The result is then a collection of interconnected configuration requirements. The interplay between more complex requirements and increasingly advanced charts is the topic of the final section of this chapter, Your own visualization.
In this chapter we will cover the following topics:
- Time-based charts
- Intensity/marker maps
- Writing your own visualization
When data value is dependent on the passing of time, a representation of the element of time must be included in the visualization. Time-based charts are the charts that animate a change in data values over a time period. Through this animation, the chart is able to graphically represent movement in values over time.
There are several time-reliant charts available through the Google Visualization API. At this time, they are the motion chart and the annotated timeline chart.
A motion chart is a visualization that animates the change in data over time. The data representation and animation of this chart can be displayed as three different chart types, bubble, bar, and line. The Size of the data point bubbles can also be set to represent additional data attributes. Colors, highlighted items, and motion tracking are also available as user control options on the chart.
Possibly the most important control of the Motion Chart is the 
button.
This button is self-explanatory in that the graphic on it is recognizable as a generic "play" button. It is intended to set the chart in motion and also pause it. Directly to the right of the "play" button is the motion speed control. The speed at which the animation progresses is controlled by the smaller arrow set on top of a column of horizontal lines. Dragging this control upwards or downwards dynamically changes the animation speed.
The Color setting on the motion chart example is configured to display blue for female and lime green for the male age groups. Selecting the tab below the Color label allows the user to change the color setting to several other options. These options include a default where all bubbles are of the same color, reliant on a data column, or the same color for all items. As additional columns are added to the dataset, they will become available as a variable in the Color drop-down menu.
You can find the Size setting just below Color. This setting determines the diameter of the motion bubbles, and can be configured to reflect a number value associated with a category or item. In this example, the diameter of the dots is related to the sizes of the 2000 and 2010 populations of male and female age groups in Chicago.
The Select setting is used to highlight one or more of the data category dots on the graph. Selected dots will appear solid in opacity, whereas unselected dots are opaque.
After the chart has been set into motion, the current point in time for the chart is available along the bottom of the chart.
When the data has completed displaying the timeline's data, the data circles will come to a stop at the end of the graph.
The motion chart offers two other types of charts to view animated data. The second tab shows data as an animated bar chart. The timeline player functions the same in this version, with bars changing in height.
Note
Depending on the order of the data in the data source, the bars of the chart may switch places graphically as one value becomes higher than another. To prevent this behavior, select the down arrow to change the Order option of the horizontal axis. Generally the switching behavior occurs when Alphabetical is the selected order.
The third type of viewing available is a simple line graph. This view is not animated, but a static representation of the data.
Another useful feature available on the motion chart user interface is the Trails option. When this option is selected, the chart draws a trail behind the data point as it traverses the graph over time. This feature is useful for examining the paths of a data point in relation to other data points as they move through time.
Finally, a small but useful display control option on a motion chart is the linear or logarithmic toggle. Found in the left-right corner of the chart, this control allows the viewer to change how the animation is interpreted between values. Selecting the Log option prepares the chart for the data values according to logarithmic scale. Alternatively, selecting the Lin option sets the data scale to linear.
Inserting a motion chart into a Google Spreadsheet is as simple as selecting Insert | Chart from the spreadsheet menu bar. The Chart Editor lists the options for visualizations, with the motion chart being categorized under Trend. As with all other Google Spreadsheet charts, the organization of data in the spreadsheet is extremely important.
The first column should contain the names of the items to be tracked on the chart. The second column consists of the sequence of dates the timeline will contain. The remaining columns can be either text or number values. In our example, the age groups of the 2000 and 2010 Chicago Census population transition from their 2000 and 2010 values.
Data for the United States Census 2000 can be found at http://www.factfinder2.census.gov. From this page, search for the desired region, which in this case is Chicago, Illinois.
Note
The live example is available at https://docs.google.com/spreadsheet/ccc?key=0AhnmGz1SteeGdHlKQUJzWmxWdjZ5NjhORDBSMnpZVFE.
The same motion chart created in Spreadsheets can also be realized using Google Visualization API code.
As with other charts, the same process of creating a chart from the library package load to the end visualization consists of several key components:
- Loading the appropriate library:
google.load('visualization', '1', {packages:['motionchart']}); - Creating or loading data into a
DataTable()method:var data = new google.visualization.DataTable();
- Drawing the chart:
var motionchart = new google.visualization.MotionChart();
The only noticeable difference between any basic visualization and a motion chart visualization is the inclusion of a date column. When describing a date for the Google Visualization API, the following format must be used:
new date(year, day, month)
The API will then interpret the column of dates and display them as points on the timeline. The complete code for the Motion Chart visualization is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1',
{packages: ['motionchart']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Age Group'),
data.addColumn('date', 'Date'),
data.addColumn('number', 'Population'),
data.addColumn('string', 'Sex'),
data.addRows([
['Under 5 years (M)', new Date(2000,0,1), 111253, 'Male'],
['Under 5 years (F)', new Date(2000,0,1),
105730, 'Female'],
['5 to 9 years (M)', new Date(2000,0,1), 113265, 'Male'],
['5 to 9 years (F)', new Date(2000,0,1),
108738, 'Female'],
['Under 5 years (M)', new Date(2010,1,1), 94100, 'Male'],
['Under 5 years (F)', new Date(2010,1,1),
91787, 'Female'],
['5 to 9 years (M)', new Date(2010,1,1), 84122, 'Male'],
['5 to 9 years (F)', new Date(2010,1,1), 81955, 'Female']
]);
var motionchart = new google.visualization.MotionChart(
document.getElementById('visualization'));
motionchart.draw(data, {'width': 800, 'height': 400});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>Note
The live example is avaialable at http://gvisapi-packt.appspot.com/ch8-examples/ch8-motion.html.
Additional information regarding motion charts can be found on the Google Developers website.
Note
The Motion Chart documentation is available at https://developers.google.com/chart/interactive/docs/gallery/motionchart.
The lesson to be learned from motion charts is primarily how to manage time-based data. It is also worth noting that the code implementation of the motion chart is similar to basic charts, with only a few minor adjustments. The motion chart itself is a complex visualization, with many possible input and output variations. The reduction of complexity for developers using a visualization in their code is a desirable outcome when developing custom visualization types. This is especially true for visualizations that are easy to implement, but provide many options to developers or users as to the configuration and formatting of their data set.
The annotated timeline provides the ability to zoom in or out on a set of data, in addition to tagging specific points with additional descriptions. The annotated timeline is available in Spreadsheets as well as in code form.
Note
Data source: factfinder2.census.gov
This chart requires limited amounts of data to create, but has the ability to include a significant amount of description data as well. Unlike the motion chart, the annotated timeline chart gives the user a zoom feature through the ability to focus on specific segments of the overall timeline using the adjustable window along the bottom of the chart. In addition to zooming capabilities, it is possible to flag specific data points and give these points additional descriptive values.
In the preceding example, the total populations of males and females in the various Census for actual and estimate years between 2000 and 2010 are visualized. With the estimates included, it is possible to see the decrease in population over the 10-year period was not linear. The 2005 and 2006 estimate values for both male and female populations have also been graphed and noted. The notations help provide insight for changes in the linearity of the population decline.
Visualizing an annotated timeline in Google Spreadsheets follows the same procedure as motion charts. The package (annotated timeline) is loaded, data is put into a DataTable(), and the visualization is drawn. However, there is a small but distinct difference between other charts and the annotated timeline in the particular importance of empty data fields.
For annotated timeline charts, blank (or null) values in the data set are just as important as other data. The formatting for this type of chart starts with the first column containing timeline dates. The second column contains data values to be displayed, with the third and fourth columns being the event flag title and descriptions.
For data points that do not have associated event flags, the cell is left empty. Additionally, if more than one category of data is to be displayed, the column patterns of data values, event flags, and title descriptions are repeated as necessary after the first set. As this is true with individual event flag information, if a flag or description is not needed at a specific data point, the corresponding cells are left empty.
Note
The live example is available at https://docs.google.com/spreadsheet/ccc?key=0AhnmGz1SteeGdHN0Qi1NeUo5UlZKVnVkcEFEeUtpZUE.
The coded version of the annotated timeline is very similar to other visualizations, with a minor change required in how data is passed or defined in DataTable(). For annotated timelines, data values that do not require an event tag or description must be filled with the value null in the DataTable().
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date'),
data.addColumn('number', 'Male'),
data.addColumn('string', 'Event'),
data.addColumn('string', 'Description'),
data.addColumn('number', 'Female'),
data.addColumn('string', 'Event'),
data.addColumn('string', 'Description'),
data.addRows([
[new Date(2000, 1 ,1), 1405107,
null, null, 1490909, null, null],
[new Date(2005, 1 ,1), 1299933,
'2005 Estimate', 'Male', 1401993, '2005 Estimate', 'Female'],
[new Date(2006, 1 ,1), 1343629,
'2006 Estimate', 'Male', 1405654, '2006 Estimate', 'Female'],
[new Date(2010, 1 ,1), 1308072,
null, null, 1387526, null, null]
]);Notice that the previous table is constructed in the same manner as other tables, with empty values of the array being replaced with null.
The following code is entirely an annotated timeline example. Optional settings, such as maximum, minimum, opacity, and colors are configured with the options array. In the Spreadsheet form, these are the configurations that can be found under Customize Tab in the Chart Editor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1',
{packages: ['annotatedtimeline']});
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('date', 'Date'),
data.addColumn('number', 'Male'),
data.addColumn('string', 'Event'),
data.addColumn('string', 'Description'),
data.addColumn('number', 'Female'),
data.addColumn('string', 'Event'),
data.addColumn('string', 'Description'),
data.addRows([
[new Date(2000, 1 ,1), 1405107, null, null,
1490909, null, null],
[new Date(2005, 1 ,1), 1299933, '2005 Estimate', 'Male',
1401993, '2005 Estimate', 'Female'],
[new Date(2006, 1 ,1), 1343629, '2006 Estimate', 'Male',
1405654, '2006 Estimate', 'Female'],
[new Date(2010, 1 ,1), 1308072, null, null,
1387526, null, null]
]);
var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {
'colors': ['green', 'orange'], // The colors to be used
'displayAnnotations': true,
'displayExactValues': true, // Do not truncate values
'displayRangeSelector' : true, // Show the range selector
'displayZoomButtons': true, // Display the zoom buttons
'fill': 30, // Fill area below the lines with 20% opacity
'legendPosition': 'newRow', // Can be sameRow
'max': 1500000, // Override the automatic default
'min': 1200000, // Override the automatic default
'scaleColumns': [0, 1], // 2 scales, by 1st& 2nd lines
'scaleType': 'allmaximized', // Fixed or maximized.
'thickness': 2, // Make the lines thicker
'zoomStartTime': new Date(2000, 1 ,1),
'zoomEndTime': new Date(2010, 1 ,1)
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>The annotated timeline is most useful when a series of time-related data points require occasional notation at various instances. As demonstrated in the example code, the annotated timeline also allows for a reasonable amount of customization in the format.
Note
The live example is available at http://gvisapi-packt.appspot.com/ch8-examples/ch8-timeline.html.
Additional information regarding annotated timelines can be found on the Google Developers website.
Note
The annotated timeline documentation is available at https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline.