Using the Google Chart Tools with R

Using the Google Chart Tools with R

Markus Gesmann and Diego de Castillo

Overview

The googleVis package provides an interface between R and the Google Chart Tools. The Google Chart Tools offer interactive charts which can be embedded into web pages. The best known of these charts is probably the Motion Chart, popularised by Hans Rosling in his TED talks.

The functions of the googleVis package allow the user to visualise data stored in R data frames with the Google Chart Tools without uploading the data to Google. The output of a googleVis function is html code that contains the data and references to JavaScript functions hosted by Google.

googleVis makes use of the internal R HTTP server to display the output locally. A modern browser with an Internet connection is required and for some charts Flash.

Introduction

Motivation

More and more data is becoming available, and yet stories and insights are still often missed: we are lost in the data jungle and struggle to see the wood for the trees.

Hence, new tools are required to bring data to life, to engage with users, to enable them to slice and dice the data, to view it from various angles and to find stories worth telling: outliers, trends or even the obvious.

In 2006 Hans Rosling gave an inspiring talk at TED (Rosling, 2006) about social and economic developments in the world over the past 50 years, which challenged the views and perceptions of many listeners. Rosling had used extensive data analysis to reach his conclusions. To visualise his talk, he and his team at Gapminder (Foundation, 2010) had developed animated bubble charts, aka motion charts.

Rosling's presentation popularised the idea and use of interactive charts. One year later the software behind Gapminder was bought by Google and integrated as motion charts into their Google Chart Tools (Inc., 2012), formerly known as Google Visualisation API.

In 2010 Sebastian Perez Saaibi (Saaibi, 2010) presented at the R/Rmetrics Workshop on Computational Finance and Financial Engineering, the idea to use Google motion charts to visualise R output with the R.rsp package (Bengtsson, 2012).

Inspired by those talks and the desire to use interactive data visualisation tools to foster the dialogue between data analysts and others the authors of this vignette started the development of the googleVis package (Gesmann & Castillo, 2014), (Gesmann & Castillo, 2011) in August 2010.

Overview of a Google Motion Chart

Overview of a Google Motion Chart. Screenshot of the output of plot(gvisMotionChart(Fruits, idvar='Fruit', timevar='Year'))

Google Chart Tools

The Google Chart Tools (Inc., 2012) allow users to create interactive charts as part of Google documents, spreadsheets and web pages. In this text we will focus on the usage of the API as part of web pages.

The Google Public Data Explorer (Inc., 2012b) provides a good example, demonstrating the use of interactive charts and how they can help to analyse data. Please note, that all of those charts are rendered by the browser.

The charting data can either be embedded into the html file or read dynamically. The key to the Google Chart Tools is that the data is structured in a DataTable (Inc., 2012c), and this is where the googleVis package helps, as it transforms R data frames into JSON (JSON.org, 2006) objects, using the RJSONIO package (Lang, 2012), as the basis for a DataTable.

As an example we shall look at the html-code of a motion chart from Google's visualisation gallery (Inc., 2012d), which generates output similar to figure below.

 1 <html>
 2  <head>
 3   <script type="text/javascript" 
 4     src="http://www.google.com/jsapi">
 5   </script>
 6   <script type="text/javascript">
 7     google.load('visualization', '1', 
 8      {'packages':['motionchart']});
 9    google.setOnLoadCallback(drawChart);
10    function drawChart() {
11    var data=new google.visualization.DataTable();
12    data.addColumn('string', 'Fruit');
13    data.addColumn('date', 'Date');
14    data.addColumn('number', 'Sales');
15    data.addColumn('number', 'Expenses');
16    data.addColumn('string', 'Location');
17    data.addRows([
18    ['Apples',new Date(1988,0,1),1000,300,'East'],
19    ['Oranges',new Date(1988,0,1),1150,200,'West'],
20    ['Bananas',new Date(1988,0,1),300,250,'West'],
21    ['Apples',new Date(1989,6,1),1200,400,'East'],
22    ['Oranges',new Date(1989,6,1),750,150,'West'],
23    ['Bananas',new Date(1989,6,1),788,617,'West']
24    ]);
25    var chart=new google.visualization.MotionChart(
26      document.getElementById('chart_div'));
27    chart.draw(data, {width: 600, height:300});
28   }
29   </script>
30  </head>
31  <body>
32   <div id="chart_div" 
33        style="width:600px; height:300px;">
34   </div>
35  </body>
36 </html>

The code and data are processed and rendered by the browser and is not submitted to any server.

You will notice that the above html code has five generic parts:

  1. references to Google's AJAX (l. 4) and Visualisation API (ll. 7 -- 8),
  2. data to visualise as a DataTable (ll. 11 -- 24),
  3. an instance call to create the chart (ll. 25 -- 26),
  4. a method call to draw the chart including options, shown here as width and height (l. 27),
  5. an HTML <div> element to add the chart to the page (ll. 32 -- 34).

These principles hold true for most of the interactive charts of the Google Chart Tools, see the examples in Figure below.

However, before you use the API you should read the Google Terms of Service.

The googleVis package

The googleVis package provides an interface between R and the Google Chart Tools. The functions of the package allow the user to visualise data stored in R data frames with the Google Chart Tools.

Version 0.5.3 of the package provides interfaces to Motion Charts, Annotated Time Lines, Maps, Geo Maps, Geo Charts, Intensity Maps, Tables, Gauges, Tree Maps, further Line, Bar, Bubble, Column, Area, Stepped Area, Combo, Scatter, Candlestick, Pie, Sankey, Annotation, Histogram, Timeline, Calendar and Org Charts.

Execute demo(googleVis) to see examples of the charts.

The output of a googleVis function is html code that contains the data and references to JavaScript functions hosted by Google. A browser with an Internet connection is required to view the output, and for Motion Charts, Geo Maps and Annotated Time Lines also Flash.

Screen shot

Screenshot of some of the outputs of demo(googleVis). Clockwise from top left: gvisMotionChart, gvisAnnotatedTimeLine, gvisGeoMap, gvisTreeMap, gvisTablez and gvisMap.

Installation

You can install googleVis in the usual way from CRAN, e.g.:
install.packages('googleVis') 
The installation was successful if the command library(googleVis) gives you the following message:
library(googleVis)
## 
## Welcome to googleVis version 0.5.3
## 
## Please read the Google API Terms of Use
## before you use the package:
## https://developers.google.com/terms/
## 
## Note, the plot method of googleVis will by default use
## the standard browser to display its output.
## 
## See the googleVis package vignettes for more details.
## 
## To suppress the this message use:
## suppressPackageStartupMessages(library(googleVis))

Using the googleVis package

The individual functions of the googleVis package are documented in the help pages. Here we will cover only the principles of the package.

As an example we will show how to generate a motion chart as displayed in
figure below. It works similarly for the other APIs. Further examples are covered in the demos of the googleVis package.

The design of the visualisation functions is fairly generic. The name of the visualisation function is 'gvis' + ChartType. So for the Motion Chart we have:

gvisMotionChart(data, idvar='id', timevar='date', 
                options=list(), chartid)

Here data is the input data.frame and idvar and timevar specify the column names of the id variable and time variable for the plot, while display options are set in an optional list, which we discuss in more detail on page settingoptions. The options and data requirements follow those of the Google Chart Tools and are documented in the help pages, see

help('gvisMotionChart')

Schematic

Schematic structure of a gvis list object.

The argument chartid allows the user to set a chart id of the output chart manually. If the argument is missing a random id using tempfile(pattern=\textquotesingle\textquotesingle) will be generated. Unique chart ids are required to place more than one chart on a web page.

The output of a googleVis function is a list of lists (a nested list) containing information about the chart type, chart id and the html code in a sub-list with header, chart, caption and footer, see figure above

The idea behind this concept is that users can get a complete web page, while at the same time offer a facility to extract specific parts, such as the chart itself. This is particularly helpful if the package functions are used in solutions where the user wants to feed the visualisation output into other sites, or would like to embed them into rsp-pages,
use rApache or Google Gadgets.

The output of a googleVis function will be of class 'gvis' and 'list'. Generic print (print.gvis) and plot (plot.gvis) functions exist to ease the handling of such objects.

To illustrate the concept we shall create a motion chart using the Fruits data set.

Motion Chart Example

Following the documentation of the Google Motion Chart API we need a data set which has at least four columns: one identifying the variable we would like to plot, one time variable and at least two numerical variables, further numerical and character columns are allowed.

As an example we use the Fruits data set:

data(Fruits)
Fruits
##     Fruit Year Location Sales Expenses Profit       Date
## 1  Apples 2008     West    98       78     20 2008-12-31
## 2  Apples 2009     West   111       79     32 2009-12-31
## 3  Apples 2010     West    89       76     13 2010-12-31
## 4 Oranges 2008     East    96       81     15 2008-12-31
## 5 Bananas 2008     East    85       76      9 2008-12-31
## 6 Oranges 2009     East    93       80     13 2009-12-31
## 7 Bananas 2009     East    94       78     16 2009-12-31
## 8 Oranges 2010     East    98       91      7 2010-12-31
## 9 Bananas 2010     East    81       71     10 2010-12-31

Here we will use the columns Fruit and 'Year' as id and time variable respectively. However we could have used 'Date' instead of 'Year' as well.

 M <- gvisMotionChart(Fruits, idvar="Fruit", timevar="Year")
plot(M)

World Bank Example

library(googleVis)
library(WDI)
inds <- c('SP.DYN.TFRT.IN','SP.DYN.LE00.IN', 'SP.POP.TOTL',
          'NY.GDP.PCAP.CD', 'SE.ADT.1524.LT.FE.ZS')
indnams <- c("fertility.rate", "life.expectancy", "population",
             "GDP.per.capita.Current.USD", "15.to.25.yr.female.literacy")
wdiData <- WDI(country="all", indicator=inds,
               start=1960, end=format(Sys.Date(), "%Y"), extra=TRUE)
colnum <- match(inds, names(wdiData))
 
names(wdiData)[colnum] <- indnams
## Create a motion chart
library(googleVis)
WorldBank <- droplevels(subset(wdiData, !region %in% "Aggregates"))
M <- gvisMotionChart(WorldBank,
                     idvar="country", timevar="year",
                     xvar="life.expectancy", yvar="fertility.rate",
                     colorvar="region", sizevar="population",
                     options=list(width=550, height=500), chartid="WorldBank")
## Display the chart in the browser
plot(M)

References

  • Google Inc., (2012) Google Visualisation Reference.
  • Gapminder Foundation, (2010) Gapminder.
  • Google Inc., (2012) Google Motion Chart API.
  • Google Inc., (2012) Google Public Data Explorer.
  • Markus Gesmann, Diego Castillo, (2014) googleVis: Using the Google Chart Tools with R.
  • Google Inc., (2012) Google Chart Tools.
  • Hans Rosling, (2006) TED Talk: Hans Rosling shows the best stats you've ever seen.
  • JSON.org, (2006) JSON.
  • Markus Gesmann, Diego Castillo, (2011) Using the Google Visualisation API with R. The R Journal 3 (2) 40-44 http://journal.r-project.org/archive/2011-2/RJournal_2011-2_Gesmann+de~Castillo.pdf
  • Duncan Lang, (2012) RJSONIO: Serialize R objects to JSON, JavaScript Object Notation.
  • Henrik Bengtsson, (2012) R.rsp: R Server Pages.
  • Sebasti'{a}n Saaibi, (2010) R/RMETRICS Generator Tool for Google Motion Charts.