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 Charts API (Inc. 2012a), formerly known as Google Visualisation API.
In 2010 Sebastián Pérez 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 and Castillo 2011) in August 2010.
The Google Charts API (Inc. 2012a) allows 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. 2012c) provides a good example, demonstrating the use of interactive charts and how they can help to analyse data.
The charting data can either be embedded into the HTML file or read dynamically. The key to the Google Charts is that the data is structured in a DataTable (Inc. 2012d), and this is where the googleVis package helps, as it transforms R data frames into JSON (JSON.org 2006) objects, using the jsonlite package (Ooms 2014), 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. 2012b).
1 <html>
2 <head>
3 <script type="text/javascript"
4 src="https://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 server1.
You will notice that the above HTML code has five generic parts:
DataTable (ll. 11 - 24),<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 the next section.
However, before you use the API you should read the Google Terms of Service (Inc 2012).
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 Google 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 a
very few chart types, notably motion charts, also Flash. Examples of
several chart types are shown below, which have been combined with the
gvisMerge function.
|
||||||
|
You can install googleVis in the usual way from CRAN, e.g.:
The installation was successful if the command
library(googleVis) gives you the following message:
##
## Welcome to googleVis version 0.7.3
##
## Please read Google's Terms of Use
## before you start using 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,
## or visit https://mages.github.io/googleVis/.
##
## To suppress this message use:
## suppressPackageStartupMessages(library(googleVis))The individual functions of the googleVis package are documented in the help pages. Here we will cover only the basic concepts of the package.
As an example, we will show how to generate a geo chart. It works similarly for the other APIs. Further examples are covered in the demos2 of the googleVis package.
The design of the visualisation functions is fairly generic. The name
of the visualisation function is 'gvis' + ChartType. So for
a geo chart we have:
gchart <- gvisGeoChart(data,
locationvar = "",
colorvar = "",
sizevar = "",
hovervar = "",
options = list(),
chartid) Here data is the input data.frame,
locationvar, colorvar, sizevar
and hovervar specify the various columns used for the plot.
Display options are set in an optional list, which we discuss in more
detail later. The options and data requirements follow those of the
Google Charts API and are documented in the help pages, see
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='') 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.
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.
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 Geo chart using the
Exports data set.
Following the documentation of the Google Geo Chart API we need a data set which has at least one column with the location variable.
As an example we use the Exports data set:
## Country Profit Online
## 1 Germany 3 TRUE
## 2 Brazil 4 FALSE
## 3 United States 5 TRUE
## 4 France 4 TRUE
## 5 Hungary 3 FALSE
## 6 India 2 TRUE
## 7 Iceland 1 FALSE
## 8 Norway 4 TRUE
## 9 Spain 5 TRUE
## 10 Turkey 1 FALSEHere we will use the columns 'Country' and
'Profit' as location and colour variable respectively.
gchart <- gvisGeoChart(data = Exports,
locationvar='Country',
colorvar='Profit',
options=list(projection="kavrayskiy-vii",
width=400, height=200))The structural output of gvisGeoChart is a list of lists
as described below.
## List of 3
## $ type : chr "GeoChart"
## $ chartid: chr "GeoChartID875b35bc61"
## $ html :List of 4
## ..$ header : chr "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0
## ..$ chart : Named chr [1:7] "<!-- GeoChart generated in R 4.4.2
## .. ..- attr(*, "names")= chr [1:7] "jsHeader" "jsData" "jsDrawCh
## ..$ caption: chr "<div><span>Data: Exports • Chart ID: <a
## ..$ footer : chr "\n<!-- htmlFooter -->\n<span> \n R version 4.
## - attr(*, "class")= chr [1:2] "gvis" "list"The first two items of the list contain information about the chart type used and the individual chart ID:
## [1] "GeoChart"## [1] "GeoChartID875b35bc61"The html output is a list with header, chart, caption and footer. This allows the user to extract only certain parts of the page, or to create a complete html page.
The header part of the html page has only basic html and formatting tags:
## <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
## "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
## <html xmlns="https://www.w3.org/1999/xhtml">
## <head>
## <title>GeoChartID875b35bc61</title>
## <meta http-equiv="content-type" content="text/html;charset=utf-8" />
## <style type="text/css">
## body {
## color: #444444;
## font-family: Arial,Helvetica,sans-serif;
## font-size: 75%;
## }
## a {
## color: #4D87C7;
## text-decoration: none;
## }
## </style>
## </head>
## <body>Here we used the print statement with the tag
'header' instead of gchart$html$header to
achieve a formatted screen output. This is the same output as
cat(gchart$html$chart).
The actual Google visualisation code is stored with the data as a
named character vector in the chart item of the HTML list.
The chart is made up of several JavaScript and HTML statements. Please
notice that the JavaScript functions are uniquely named with the
information of the chart ID. This concept allows the user get all the
chart code directly or only specific parts; see the examples in the help
page of print.gvis for more details.
## [1] "jsHeader" "jsData" "jsDrawChart" "jsDisplayChart"
## [5] "jsFooter" "jsChart" "divChart"The complete chart can be displayed via:
## <!-- GeoChart generated in R 4.4.2 by googleVis 0.7.3 package -->
## <!-- Thu Nov 21 04:20:15 2024 -->
##
##
## <!-- jsHeader -->
## <script type="text/javascript">
##
## // jsData
## function gvisDataGeoChartID875b35bc61 () {
## var data = new google.visualization.DataTable();
## var datajson =
## [
## [
## "Germany",
## 3
## ],
## [
## "Brazil",
## 4
## ],
## [
## "United States",
## 5
## ],
## [
## "France",
## 4
## ],
## [
## "Hungary",
## 3
## ],
## [
## "India",
## 2
## ],
## [
## "Iceland",
## 1
## ],
## [
## "Norway",
## 4
## ],
## [
## "Spain",
## 5
## ],
## [
## "Turkey",
## 1
## ]
## ];
## data.addColumn('string','Country');
## data.addColumn('number','Profit');
## data.addRows(datajson);
## return(data);
## }
##
## // jsDrawChart
## function drawChartGeoChartID875b35bc61() {
## var data = gvisDataGeoChartID875b35bc61();
## var options = {};
## options["width"] = 400;
## options["height"] = 200;
## options["projection"] = "kavrayskiy-vii";
##
##
## var chart = new google.visualization.GeoChart(
## document.getElementById('GeoChartID875b35bc61')
## );
## chart.draw(data,options);
##
##
## }
##
##
## // jsDisplayChart
## (function() {
## var pkgs = window.__gvisPackages = window.__gvisPackages || [];
## var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
## var chartid = "geochart";
##
## // Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
## var i, newPackage = true;
## for (i = 0; newPackage && i < pkgs.length; i++) {
## if (pkgs[i] === chartid)
## newPackage = false;
## }
## if (newPackage)
## pkgs.push(chartid);
##
## // Add the drawChart function to the global list of callbacks
## callbacks.push(drawChartGeoChartID875b35bc61);
## })();
## function displayChartGeoChartID875b35bc61() {
## var pkgs = window.__gvisPackages = window.__gvisPackages || [];
## var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
## window.clearTimeout(window.__gvisLoad);
## // The timeout is set to 100 because otherwise the container div we are
## // targeting might not be part of the document yet
## window.__gvisLoad = setTimeout(function() {
## var pkgCount = pkgs.length;
## google.load("visualization", "1", { packages:pkgs, callback: function() {
## if (pkgCount != pkgs.length) {
## // Race condition where another setTimeout call snuck in after us; if
## // that call added a package, we must not shift its callback
## return;
## }
## while (callbacks.length > 0)
## callbacks.shift()();
## } });
## }, 100);
## }
##
## // jsFooter
## </script>
##
## <!-- jsChart -->
## <script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartGeoChartID875b35bc61"></script>
##
## <!-- divChart -->
##
## <div id="GeoChartID875b35bc61"
## style="width: 400; height: 200;">
## </div>Similarly you can also access specific components of the chart, e.g. (output truncated)
##
## <!-- jsChart -->
## <script type="text/javascript" src="https://www.google.com/jsapi?cA basic chart caption and html footer are the final items of the html list (output truncated):
## <div><span>Data: Exports • Chart ID: <a href="Chart_GeoChart##
## <!-- htmlFooter -->
## <span>
## R version 4.4.2 (2024-10-31)
## • <a href="https://developers.google.com/terms/">Google Te
## </span></div>
## </body>
## </html>To display the page locally, simply type:
The plot method for gvis-objects creates HTML files in a
temporary folder using the type and chart ID information of the object
and it will display the output using the R built-in web server.
Note that the chart caption provides a link to the chart code via the chart ID for copy and paste.
The R command tempdir() will show you the path of the
per-session temporary directory, in which the files were written. You
can write the chart into a local html file via the print
command with the file argument, e.g.
Alternatively use the function plot.gvis explicitly,
e.g. suppose your html file is stored in
/Users/JoeBloggs/myGoogleVisChart.html. Using the
plot.gvis the file will be copied into a temporary
directory and displayed via the R HTTP help server with, in the same way
as a gvis-object:
Setting the various options of a googleVis objects can be a bit
cumbersome at first. The options follow those of the Google Charts API
and can be set via a named list using the argument options.
In the following example, we create a line chart and set various
options:
df <- data.frame(country=c("US", "GB", "BR"),
val1=c(1,3,4), val2=c(23,12,32))
Line <- gvisLineChart(df, xvar="country", yvar=c("val1","val2"),
options=list(
title="Hello World",
titleTextStyle="{color:'red',
fontName:'Courier',
fontSize:16}",
backgroundColor="#D3D3D3",
vAxis="{gridlines:{color:'red', count:3}}",
hAxis="{title:'Country', titleTextStyle:{color:'blue'}}",
series="[{color:'green', targetAxisIndex: 0},
{color: 'orange',targetAxisIndex:1}]",
vAxes="[{title:'val1'}, {title:'val2'}]",
legend="bottom",
curveType="function",
width=500,
height=300
))
plot(Line)As you can see from the example above, the simpler options can be set
by name=value, e.g. width=500, while the more
complex options with sub-components are listed in curly brackets
{} and arrays [], e.g. to define the two
axes.
Generally, the following rules apply:
options=list(width=200, height=300). Boolean
arguments are set to either TRUE or FALSE,
using the R syntax.color, and are wrapped in
[ ], e.g.
options=list(colors="['#cbb69d', '#603913', '#c69c6e']")parameter:value.
Boolean values have to be stated as 'true' or
'false'. For example the Google documentation states the
formatting options for the vertical axis as vAxis.format.
Then this parameter can be set in R as:
options=list(vAxis="{format:'#,###%'}").titleTextStyle.color, titleTextStyle.fontName
and titleTextStyle.fontSize, then those can be combined in
one list item such as:
options=list(titleTextStyle="{color:'red',fontName:'Courier', fontSize:16}")[ ]. For example to set the labels for left and
right axes use:
options=list(vAxes="[{title:'val1'}, {title:'val2'}]")A special option for all charts is gvis.editor, which
adds an edit button to the page, allowing the user to edit, change and
customise the chart on the fly. The content of the option
gvis.editor describes the label of the browser button.
Suppose you have an existing web page and would like to integrate the
output of a googleVis function, such as gvisLineChart. In
this case you only need the chart output from
gvisLineChart. So you can either copy and paste the output
from the R console
into your existing html page, or write the content directly into a file
and process it from there.
Shiny is a package by RStudio, which makes it incredibly easy to build interactive web applications with R.
With version 0.4.0 of googleVis support for shiny apps was added. Joe
Cheng contributed the renderGvis function which allows
users to use googleVis output in shiny in a similar way to other
plotting functions.
The following example has been taken from the help file of
renderGvis. It displays a scatter chart where the user can
select the data set to be displayed.
# server.R
library(googleVis)
shinyServer(function(input, output) {
datasetInput <- reactive({
switch(input$dataset,
"rock" = rock,
"pressure" = pressure,
"cars" = cars)
})
output$view <- renderGvis({
gvisScatterChart(datasetInput())
})
})
# ui.R
shinyUI(pageWithSidebar(
headerPanel("googleVis on Shiny"),
sidebarPanel(
selectInput("dataset", "Choose a dataset:",
choices = c("rock", "pressure", "cars"))
),
mainPanel(
htmlOutput("view")
)
))You can run the example locally with the following statement.
print.gvis and
plot.gvisIn googleVis version 0.3.2 the function plot.gvis gained
the same argument as print.gvis: tag. By
default the tag argument is set to NULL in
plot.gvis and the plot function will display its output in
a browser window. However, if tag is not NULL
the function plot.gvis will behave exactly like
print.gvis.
The default tag can be set for both functions globally
via the options() function. On package load googleVis sets
options(gvis.print.tag='html') and
options(gvis.plot.tag=NULL).
Suppose you would set options(gvis.plot.tag='chart')
then all following plot statements would print the chart part of the
gvis-object only, without opening a browser window. This might seem a
bit odd at first, yet it becomes helpful when you write R Markdown files
for knitr or files for other packages such as
R.rsp.
While you draft your file you may want to see the output of googleVis
in an interactive way, so you set
options(gvis.plot.tag=NULL) at the top of the file and you
change the setting to 'chart' before you parse the file,
say with knitr. This will ensure that all plot statements
return the HTML code of the chart, rather than opening browser
windows.
Using googleVis with knitr (Xie 2013) is a convenient way of creating interactive reproducible reports. The approach taken by knitr is similar to Sweave, you can combine R code with text and formatting tags. However, knitr can also export to HTML, which is required to embed googleVis charts.
To include googleVis output into a knitr document you have to set the
self_contained option to false in the YAML
header:
---
title: "My document"
output:
html_document:
self_contained: false
---Furthermore, the chunk option results should be set to
'asis', so that the html output is written into the
markdown file.
You can either use the print statement:
```{r results='asis'}
gchart <- gvisColumnChart(CityPopularity, 'City', 'Popularity',
options=list(width=550, height=450,
legend='none'))
print(gchart, 'chart')
```or alternative change the behaviour of the plot function
via setting options(gvis.plot.tag = 'chart'). With this
setting plot(x) will no longer open a browser window, but
produce the same output as print(x, tag='chart'), if
x is a gvis-object.
Hence, setting the option gvis.plot.tag in a knitr
markdown Rmd-file to 'chart' will automatically turn all
following plot statements into html output.
Note that you can use the options() command in your
knitr file to switch between an interactive mode, where you are likely
to experiment, via copying and pasting R code into the console and
running knit on the whole file.
A more comprehensive example is given in the help file to
?plot.gvis.
The Google Chart Tools are designed for web pages, so it should be no surprise that it can be difficult or impossible to embed googleVis output in traditional presentation software like MS PowerPoint, Google Docs, OpenOffice Impress or Apple Keynote.
The easiest way is to include screen shots into the slide with links to the live web pages. But this approach requires the presenter to switch between applications during her talk. This can be fun, but quite often it is not.
An alternative would be to build the presentation as a web page itself.
A popular approach here is the slidify package by
Ramnath Vaidyanathan, (Vaidyanathan 2012)
that builds on the knitr Markdown approach of the previous section. An
example of a slidify presentation is the googleVis
tutorial given at the useR! conference in 2013, Gesmann and Castillo (2013).
A trendline is a line superimposed on a chart revealing the overall direction of the data. Google Charts can automatically generate trendlines for Scatter Charts, Bar Charts, Column Charts and Line Charts.
For more details visit: https://developers.google.com/chart/interactive/docs/gallery/trendlines
plot(
gvisScatterChart(women, options=list(
trendlines="{0: { type: 'exponential',
visibleInLegend: 'true',
color: 'green',
lineWidth: 10,
opacity: 0.5}}",
chartArea="{left:50,top:20,width:'50%',height:'75%'}"))
)Roles add the ability to pass columns for further processing downstream. Role columns must follow column they pertain to. Proper naming conventions must be observed. For example, roles fulfilling tooltip roles and must be called “foo.blah.tooltip”. For more details see the Google documentation.
The following examples should help to illustrate the concept.
The first example uses a data set that has the additional column
pop.html.tooltip with the first 11 letters of the Latin
alphabet. This column is mapped automatically as a tooltip when the user
hovers over the chart point.
HTML code can be embedded into the tooltip as well, if the option
isHtml is set to true.
Often it is helpful to highlight certain parts of the data. The Google API distinguishes between certainty and emphasis. In a similar way to above additional columns with boolean values have to be added to the data.
df <- data.frame(year=1:11, x=1:11,
x.scope=c(rep(TRUE, 8), rep(FALSE, 3)),
y=11:1, y.html.tooltip=LETTERS[11:1],
y.certainty=c(rep(TRUE, 5), rep(FALSE, 6)),
y.emphasis=c(rep(FALSE, 4), rep(TRUE, 7)))
plot(
gvisScatterChart(df,options=list(lineWidth=2))
)Using roles with column or bar charts has some specifics. Instead of ‘emphasize’ use ‘style’ to change the colours.
dat <- data.frame(Year=2010:2013,
Sales=c(600, 1500, 800, 1000),
Sales.html.tooltip=c('$600K in our first year!',
'Sunspot activity made this our best year ever!',
'$800K in 2012.',
'$1M in sales last year.'),
Sales.certainty=c(TRUE, FALSE, TRUE, FALSE))
plot(
gvisColumnChart(dat, xvar='Year',
yvar=c('Sales', 'Sales.certainty')
)
)df <- data.frame(country=c("US", "GB", "BR"),
val1=c(1,3,4),
val1.emphasis=c(TRUE, TRUE, FALSE),
val2=c(23,12,32))
plot(
gvisLineChart(df, xvar="country",
yvar=c("val1", "val1.emphasis")
)
)Setting the annotations style to ‘line’ allows adding little reference lines to the plot.
dat <- data.frame(Year=2010:2013,
Sales=c(600, 1500, 800, 1000),
Sales.annotation=c('First year', NA, NA, 'Last Year'),
Sales.annotationText=c('$600K in our first year!',
NA,
NA,
'$1M in sales last year.'))
plot(
gvisLineChart(dat, xvar='Year',
yvar=c('Sales',
'Sales.annotation',
'Sales.annotationText'),
options=list(annotations = "{style:'line'}")
)
)Intervals help to add error bars, confidence levels, etc. Note that
the options are set either via interval or
intervals, if set to all intervals. The examples below give
an indication of what can be achieved with intervals. For more details
visit the Google documentation.
df <- data.frame(Year=2013:2014, Sales=c(120, 130),
Sales.interval.1=c(100,110),
Sales.interval.2=c(140, 150),
Sales.interval.3=c(90, 100),
Sales.interval.4=c(150, 170),
Sales.style=c('red', 'gold'),
Sales.annotation=c("North", "South"),
check.names=FALSE)
plot(
gvisBarChart(df, xvar='Year',
yvar=c('Sales',
'Sales.interval.1',
'Sales.interval.2',
'Sales.style',
'Sales.annotation')
)
)plot(
gvisLineChart(df, xvar='Year',
yvar=c('Sales',
'Sales.interval.1',
'Sales.interval.2'),
options=list(series="[{color:'purple'}]")
)
)plot(
gvisLineChart(df, xvar='Year',
yvar=c('Sales',
'Sales.interval.1',
'Sales.interval.2',
'Sales.interval.3',
'Sales.interval.4'),
options=list(series="[{color:'purple'}]",
lineWidth=4,
interval="{
'i1': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
'i2': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
'i3': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
'i4': { 'style':'line', 'color':'#5F9654', 'lineWidth': 3 }
}")
)
)plot(
gvisLineChart(df, xvar='Year',
yvar=c('Sales',
'Sales.interval.1',
'Sales.interval.2',
'Sales.interval.3',
'Sales.interval.4'),
options=list(series="[{color:'purple'}]",
lineWidth=4,
intervals="{ 'style':'area' }",
interval="{
'i1': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i2': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 }}"
)
)
)The tool tips in geo charts need a little work around, a
Tooltip.header variable has to be set to an empty
string:
Exports$Profit.tooltip <- paste("<b>Test</b>", Exports$Profit)
Exports$Tooltip.header <- ""
GeoTooltip <- gvisGeoChart(
Exports,
locationvar = "Country",
colorvar = "Profit",
hovervar = "Tooltip.header",
options = list(tooltip = "{isHtml: true}")
)
plot(GeoTooltip)In this section we present ideas which go beyond the usual coding in R and are somewhat experimental.
Google visualisations can fire and receive events. It exposes the following two JavaScript methods:
google.visualization.events.trigger() fires an
event,google.visualization.events.addListener() listens for
events.Here is an example of registering to receive the selection event from the Google documentation:
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
google.visualization.events.addListener(table, 'select', selectHandler);
function selectHandler() {
alert('A table row was selected');
}We will only deal with this special case of a ‘select’ event of the ‘addListner’ method. This event is available for most visualisations and acts on user interactions, e.g. user selection clicks.
The ‘addListener’ method expects JavaScript code, which can be
embedded into a gvis-object via options as (undocumented)
parameter gvis.listener.jscode.
Here are some examples:
Look up the selected item in Wikipedia:
jscode <- "window.open('https://en.wikipedia.org/wiki/'
+ data.getValue(chart.getSelection()[0].row,0)); "
J1 <- gvisGeoChart(Exports, locationvar='Country', sizevar = 'Profit',
options=list(dataMode="regions",
gvis.listener.jscode=jscode))
plot(J1)In the same way we can use the code in other charts, e.g. org- or line charts:
plot(gvisOrgChart(Regions, options=list(gvis.listener.jscode=jscode)))
plot(gvisLineChart(Regions[,c(1,3)], options=list(gvis.listener.jscode=jscode)))In the following more advanced example the selected value of a table is displayed in a message box:
jscode <- "
var sel = chart.getSelection();
var row = sel[0].row;
var text = data.getValue(row,1);
alert(text);
"
J2 <- gvisTable(Population[1:5,],
options=list(gvis.listener.jscode=jscode))
plot(J2)For more details see the demo(EventListener) and Google
Charts Reference.
Other R packages provide alternatives to the Flash based Google motion chart, such as plotly, gganimate
No, not directly. The Google Charts API is designed for dynamic web output on your screen and not on paper.
For further details see Google’s online documentation on printing PNG charts.
No, unfortunately not. The colours are set by the Google Charts API and cannot be changed by the user.
Note that Flash charts may not work when loaded as a local file due to security settings, and therefore require to be displayed via a web server. However, you can overcome this issue by changing your Flash security settings. Tony Breyal posted the following solution on stackoverflow.com:
Motion charts (also geo maps and annotated time lines) are rendered in your browser using Flash, unlike most other charts which use HTML5. Unfortunately, Flash is not directly supported on iOS devices such as iPads and iPhones.
Unfortunately, there are no arguments such as ylim and
xlim. Instead, the Google Charts axes options are set via
hAxes and vAxes, with ‘h’ and ‘v’ indicating
the horizontal and vertical axis. More precisely, we have to set
viewWindowMode:'explicit' and set the
viewWindow to the desired min and
max values. Additionally, we have to wrap all of this in
[{}] brackets as those settings are sub options of
h/vAxes. There are also options minValue and
maxValue, but they only allow you to extend the axes
ranges.
Here is a minimal example, setting the y-axis limits from 0 to 10:
dat <- data.frame(x=LETTERS[1:10],
y=c(0, 4, -2, 2, 4, 3, 8, 15, 10, 4))
area1 <- gvisAreaChart(xvar="x", yvar="y", data=dat,
options=list(vAxes="[{viewWindowMode:'explicit',
viewWindow:{min:0, max:10}}]",
width=500, height=400,
title="y-limits set from 0 to 10"),
chartid="area1ylim")
plot(area1)The googleVis package converts data frames into JSON objects. The column names of the resulting JSON tables are encapsulated with single speech marks.
Hence apostrophes in column names of your input data frame have to be encapsulated by a double backslash.
Here is a little example:
df <- data.frame("Year"=c('2009', '2010'),
"Alice\\'s salary"=c(86.1, 93.3),
"Bob\\'s salary"=c(95.3, 100.5),
check.names=FALSE)
gchart <- gvisColumnChart(df, options=list(vAxis='{baseline:0}',
title="Salary",
legend="{position:'bottom'}"))
plot(gchart)The charts have a lot of options which allow you to change the look and feel of the output, see the help files for more details. However, googleVis provides only an interface to the Google Charts API. If you have specific questions to the charts then please ask the Google Visualisation API newsgroup.
For frequent ask questions regarding the API check: https://developers.google.com/chart/interactive/faq.
Review the Google Terms of Service and get in touch with your colleagues in IT / Legal. If in doubt contact Google directly.
Should you find any issues or bugs with googleVis, then please drop us a line or add them to our issues list: (https://github.com/mages/googleVis/issues)
Please cite googleVis if you use it in your work or publications:
## To cite googleVis in publications, please use
##
## Markus Gesmann and Diego de Castillo. Using the Google Visualisation
## API with R. The R Journal, 3(2):40-44, December 2011.
##
## A BibTeX entry for LaTeX users is
##
## @Article{,
## title = {googleVis: Interface between R and the Google Visualisation API},
## author = {Markus Gesmann and Diego {de Castillo}},
## journal = {The R Journal},
## year = {2011},
## volume = {3},
## number = {2},
## pages = {40--44},
## month = {December},
## url = {https://journal.r-project.org/archive/2011-2/RJournal_2011-2_Gesmann+de~Castillo.pdf},
## }See demo(package="googleVis") for a list of
the available demos↩︎
print.gvis and
plot.gvis