You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<script type="text/javascript">
// jsData
function gvisDataMotionChartID303044eee160 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Apples",
2008,
"West",
98,
78,
20,
"2008-12-31"
],
[
"Apples",
2009,
"West",
111,
79,
32,
"2009-12-31"
],
[
"Apples",
2010,
"West",
89,
76,
13,
"2010-12-31"
],
[
"Oranges",
2008,
"East",
96,
81,
15,
"2008-12-31"
],
[
"Bananas",
2008,
"East",
85,
76,
9,
"2008-12-31"
],
[
"Oranges",
2009,
"East",
93,
80,
13,
"2009-12-31"
],
[
"Bananas",
2009,
"East",
94,
78,
16,
"2009-12-31"
],
[
"Oranges",
2010,
"East",
98,
91,
7,
"2010-12-31"
],
[
"Bananas",
2010,
"East",
81,
71,
10,
"2010-12-31"
]
];
data.addColumn('string','Fruit');
data.addColumn('number','Year');
data.addColumn('string','Location');
data.addColumn('number','Sales');
data.addColumn('number','Expenses');
data.addColumn('number','Profit');
data.addColumn('string','Date');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartMotionChartID303044eee160() {
var data = gvisDataMotionChartID303044eee160();
var options = {};
options["width"] = 600;
options["height"] = 400;
var chart = new google.visualization.MotionChart(
document.getElementById('MotionChartID303044eee160')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "motionchart";
// 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(drawChartMotionChartID303044eee160);
})();
function displayChartMotionChartID303044eee160() {
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>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMotionChartID303044eee160"></script>
googleVis version 0.4.2 provides interfaces to
Flash based
Motion Charts
Annotated Time Lines
Geo Maps
HMTL5/SVG based
Maps, Geo Charts and Intensity Maps
Tables, Gauges, Tree Maps
Line-, Bar-, Column-, Area- and Combo Charts
Scatter-, Bubble-, Candlestick-, Pie- and Org Charts
Run demo(googleVis) to see examples of all charts and read the vignette for more details.
Key ideas of googleVis
Create wrapper functions in R which generate html files with references to Google's Chart Tools API
Transform R data frames into JSON objects with RJSONIO
Options in googleVis have to follow the Google Chart API options
Line chart with options
plot(Line)
<script type="text/javascript">
// jsData
function gvisDataLineChartID30301f0e88fb () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"US",
1,
23
],
[
"GB",
3,
12
],
[
"BR",
4,
32
]
];
data.addColumn('string','label');
data.addColumn('number','val1');
data.addColumn('number','val2');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartLineChartID30301f0e88fb() {
var data = gvisDataLineChartID30301f0e88fb();
var options = {};
options["allowHtml"] = true;
options["title"] = "Hello World";
options["legend"] = "bottom";
options["titleTextStyle"] = {color:'red', fontSize:18};
options["vAxis"] = {gridlines:{color:'red', count:3}};
options["hAxis"] = {title:'My Label', titleTextStyle:{color:'blue'}};
options["series"] = [{color:'green', targetAxisIndex: 0},
{color: 'blue',targetAxisIndex:1}];
options["vAxes"] = [{title:'Value 1 (%)', format:'##,######%'},
{title:'Value 2 (£)'}];
options["curveType"] = "function";
options["width"] = 500;
options["height"] = 300;
var chart = new google.visualization.LineChart(
document.getElementById('LineChartID30301f0e88fb')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "corechart";
// 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(drawChartLineChartID30301f0e88fb);
})();
function displayChartLineChartID30301f0e88fb() {
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>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartLineChartID30301f0e88fb"></script>
On-line changes
You can enable the chart editor which allows users to change the chart.
<script type="text/javascript">
// jsData
function gvisDataLineChartID3030734326aa () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"US",
1,
23
],
[
"GB",
3,
12
],
[
"BR",
4,
32
]
];
data.addColumn('string','label');
data.addColumn('number','val1');
data.addColumn('number','val2');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartLineChartID3030734326aa() {
var data = gvisDataLineChartID3030734326aa();
var options = {};
options["allowHtml"] = true;
options["height"] = 350;
chartLineChartID3030734326aa = new google.visualization.ChartWrapper({
dataTable: data,
chartType: 'LineChart',
containerId: 'LineChartID3030734326aa',
options: options
});
chartLineChartID3030734326aa.draw();
}
function openEditorLineChartID3030734326aa() {
var editor = new google.visualization.ChartEditor();
google.visualization.events.addListener(editor, 'ok',
function() {
chartLineChartID3030734326aa = editor.getChartWrapper();
chartLineChartID3030734326aa.draw(document.getElementById('LineChartID3030734326aa'));
});
editor.openDialog(chartLineChartID3030734326aa);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "charteditor";
// 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(drawChartLineChartID3030734326aa);
})();
function displayChartLineChartID3030734326aa() {
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>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartLineChartID3030734326aa"></script>
<script type="text/javascript">
// jsData
function gvisDataMotionChartID30303d9f9e04 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Apples",
2008,
"West",
98,
78,
20,
"2008-12-31"
],
[
"Apples",
2009,
"West",
111,
79,
32,
"2009-12-31"
],
[
"Apples",
2010,
"West",
89,
76,
13,
"2010-12-31"
],
[
"Oranges",
2008,
"East",
96,
81,
15,
"2008-12-31"
],
[
"Bananas",
2008,
"East",
85,
76,
9,
"2008-12-31"
],
[
"Oranges",
2009,
"East",
93,
80,
13,
"2009-12-31"
],
[
"Bananas",
2009,
"East",
94,
78,
16,
"2009-12-31"
],
[
"Oranges",
2010,
"East",
98,
91,
7,
"2010-12-31"
],
[
"Bananas",
2010,
"East",
81,
71,
10,
"2010-12-31"
]
];
data.addColumn('string','Fruit');
data.addColumn('number','Year');
data.addColumn('string','Location');
data.addColumn('number','Sales');
data.addColumn('number','Expenses');
data.addColumn('number','Profit');
data.addColumn('string','Date');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartMotionChartID30303d9f9e04() {
var data = gvisDataMotionChartID30303d9f9e04();
var options = {};
options["width"] = 500;
options["height"] = 350;
var chart = new google.visualization.MotionChart(
document.getElementById('MotionChartID30303d9f9e04')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "motionchart";
// 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(drawChartMotionChartID30303d9f9e04);
})();
function displayChartMotionChartID30303d9f9e04() {
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>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMotionChartID30303d9f9e04"></script>
Change displaying settings via the browser, then copy the state string from the 'Advanced' tab and set to state argument in options.
Ensure you have newlines at the beginning and end of the string.
<script type="text/javascript">
// jsData
function gvisDataOrgChartID30301de3c552 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Global",
null,
"10"
],
[
"America",
"Global",
"2"
],
[
"Europe",
"Global",
"99"
],
[
"Asia",
"Global",
"10"
],
[
"France",
"Europe",
"71"
],
[
"Sweden",
"Europe",
"89"
],
[
"Germany",
"Europe",
"58"
],
[
"Mexico",
"America",
"2"
],
[
"USA",
"America",
"38"
],
[
"China",
"Asia",
"5"
],
[
"Japan",
"Asia",
"48"
]
];
data.addColumn('string','Region');
data.addColumn('string','Parent');
data.addColumn('string','Val');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartOrgChartID30301de3c552() {
var data = gvisDataOrgChartID30301de3c552();
var options = {};
options["width"] = 600;
options["height"] = 250;
options["size"] = "large";
options["allowCollapse"] = true;
var chart = new google.visualization.OrgChart(
document.getElementById('OrgChartID30301de3c552')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "orgchart";
// 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(drawChartOrgChartID30301de3c552);
})();
function displayChartOrgChartID30301de3c552() {
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>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartOrgChartID30301de3c552"></script>
Org chart data
Regions
## Region Parent Val Fac
## 1 Global <NA> 10 2
## 2 America Global 2 4
## 3 Europe Global 99 11
## 4 Asia Global 10 8
## 5 France Europe 71 2
## 6 Sweden Europe 89 3
## 7 Germany Europe 58 10
## 8 Mexico America 2 9
## 9 USA America 38 11
## 10 China Asia 5 1
## 11 Japan Asia 48 11
Notice the data structure. Each row in the data table describes one node. Each node (except the root node) has one or more parent nodes.
<script type="text/javascript">
// jsData
function gvisDataTreeMapID303054af99d2 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Global",
null,
10,
2
],
[
"America",
"Global",
2,
4
],
[
"Europe",
"Global",
99,
11
],
[
"Asia",
"Global",
10,
8
],
[
"France",
"Europe",
71,
2
],
[
"Sweden",
"Europe",
89,
3
],
[
"Germany",
"Europe",
58,
10
],
[
"Mexico",
"America",
2,
9
],
[
"USA",
"America",
38,
11
],
[
"China",
"Asia",
5,
1
],
[
"Japan",
"Asia",
48,
11
]
];
data.addColumn('string','Region');
data.addColumn('string','Parent');
data.addColumn('number','Val');
data.addColumn('number','Fac');
data.addRows(datajson);
return(data);
}
// jsDrawChart
function drawChartTreeMapID303054af99d2() {
var data = gvisDataTreeMapID303054af99d2();
var options = {};
options["width"] = 450;
options["height"] = 320;
var chart = new google.visualization.TreeMap(
document.getElementById('TreeMapID303054af99d2')
);
chart.draw(data,options);
}
// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "treemap";
// 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(drawChartTreeMapID303054af99d2);
})();
function displayChartTreeMapID303054af99d2() {
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>
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartTreeMapID303054af99d2"></script>
All the guys behind www.gapminder.org and Hans Rosling for telling
everyone that data is not boring
Sebastian Perez Saaibi for his inspiring talk on 'Generator
Tool for Google Motion Charts' at the R/RMETRICS conference 2010
Henrik Bengtsson for providing the 'R.rsp: R Server Pages'
package and his reviews and comments
Duncan Temple Lang for providing the 'RJSONIO' package
Deepayan Sarkar for showing us in the lattice package how to deal
with lists of options
Paul Cleary for a bug report on the handling of months:
Google date objects expect the months Jan.- Dec. as 0 - 11 and
not 1 - 12.
Ben Bolker for comments on plot.gvis and the usage of temporary
files
Thanks
John Verzani for pointing out how to use the R http help server
Cornelius Puschmann and Jeffrey Breen for highlighting a
dependency issue with RJONSIO version 0.7-1
Manoj Ananthapadmanabhan and Anand Ramalingam for providing
ideas and code to animate a Google Geo Map
Rahul Premraj for pointing out a rounding issue with Google Maps
Mike Silberbauer for an example showing how to shade the
areas in annotated time line charts
Tony Breyal for providing instructions on changing the Flash
security settings to display Flash charts locally
Alexander Holcroft for reporting a bug in gvisMotionChart
when displaying data with special characters in column names
Pat Burns for pointing out typos in the vignette
Thanks
Jason Pickering for providing a patch to allow for quarterly
and weekly time dimensions to be displayed with gvisMotionChart
Oliver Jay and Wai Tung Ho for reporting an issue with one-row
data sets
Erik Bülow for pointing out how to load the Google API via a
secure connection
Sebastian Kranz for comments to enhance the argument list for
gvisMotionChart to make it more user friendly
Sebastian Kranz and Wei Luo for providing ideas and code to
improve the transformation of R data frames into JSON code
Sebastian Kranz for reporting a bug in version 0.3.0
Leonardo Trabuco for helping to clarify the usage of the
argument state in the help file of gvisMotionChart
Mark Melling for reporting an issue with jsDisplayChart and
providing a solution
Thanks
Joe Cheng for code contribution to make googleVis work with shiny
John Maindonald for reporting that the WorldBank demo didn't
download all data, but only the first 12000 records.
Sebastian Campbell for reporting a typo in the Andrew and Stock
data set and pointing out that the core charts, such as line
charts accept also date variables for the x-axis.
John Maindonald for providing a simplified version of the
WorldBank demo using the WDI package.
John Muschelli for suggesting to add 'hovervar' as an additional
argument to gvisGeoChart.
Session Info
sessionInfo()
## R version 3.0.1 (2013-05-16)
## Platform: x86_64-apple-darwin10.8.0 (64-bit)
##
## locale:
## [1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8
##
## attached base packages:
## [1] stats graphics grDevices utils datasets methods base
##
## other attached packages:
## [1] XML_3.95-0.2 RJSONIO_1.0-3 googleVis_0.4.3 slidify_0.3.3
##
## loaded via a namespace (and not attached):
## [1] digest_0.6.3 evaluate_0.4.3 formatR_0.7 knitr_1.2
## [5] markdown_0.5.4 stringr_0.6.2 tools_3.0.1 whisker_0.3-2
## [9] yaml_2.1.7
