Print and plot gvis objects
gvisMethods.Rd
Methods to print and plot gvis
objects
Arguments
- x
An object of class
gvis
, or a HTML file in case of plot.gvis.- tag
Default
NULL
. Name tag of the objects to be extracted from a gvis object. If tag is missing then the values ofgetOption("gvis.print.tag")
,getOption("gvis.plot.tag")
will be used forprint.gvis
andplot.gvis
respectively.A complete list of available tags is given by the command
getOption("gvis.tags")
.The default value of
gvis.print.tag
is"html"
, which meansprint.gvis
will show a complete web page with the visualisation, while the tag"chart"
will present the code for the visualisation chart only. For more information see the details section.The default tag for
plot.gvis.tag
isNULL
, which will result in R opening a browser window, while any tag which is notNULL
will give the same behaviour asprint.gvis
, e.g.tag='chart'
or settingoptions(gvis.plot.tag='chart')
will produce the same output asprint(x, tag='chart')
. This behaviour is particular helpful when googleVis is used in scripts, likeknitr
orR.rsp
. The plot commands can be used initially in an interactive mode and with one change inoptions()
produce the HTML output required for a programmatic run of the script. See the example section below for aknitr
case study.plot.gvis
ignores the argumenttag
itx
is a HTML file name.- file
file name. If "" (the default), output will be printed to the standard output connection, the console unless redirected by
sink
.- ...
arguments passed on to
cat
(print.gvis
) orbrowseURL
(plot.gvis
).
Details
An object of class "gvis
" is a list containing at least the
following components (tags):
type
Google visualisation type, e.g. 'MotionChart'
chartid
character id of the chart object. Unique chart ids are required to place several charts on the same page.
html
a list with the building blocks for a page
header
a character string of a html page header:
<html>...<body>
,chart
a named character vector of the chart's building blocks:
jsHeader
Opening
<script>
tag and reference to Google's JavaScript library.jsData
JavaScript function defining the input
data
as a JSON object.jsDrawChart
JavaScript function combing the data with the visualisation API and user options.
jsDisplayChart
JavaScript function calling the handler to display the chart.
jsFooter
End tag
</script>
.jsChart
Call of the
jsDisplayChart
function.divChart
<div>
container to embed the chart into the page.
caption
character string of a standard caption, including data name and chart id.
footer
character string of a html page footer:
</body>...</html>
, including the used R and googleVis version and link to Google's Terms of Use.
References
Please see also the package vignette for the usage of the googleVis package with RApache, brew, knitr and R.rsp.
Note
The plot
command does not open a graphics device in the
traditional way. Instead it creates HTML files in a temporary
directory and uses the R HTTP server to display the output
of a googleVis
function locally.
A browser with Flash and Internet connection is required.
The displayed page includes a link (click on the chart id) to a
further page, which shows the code of the chart for the user to copy
and paste into her own page.
See also
See also cat
, browseURL
,
createGoogleGadget
and gvisMerge
for combining charts.
Examples
## Show gvis options
sapply(c("gvis.print.tag", "gvis.plot.tag", "gvis.tags"), getOption)
#> $gvis.print.tag
#> [1] "html"
#>
#> $gvis.plot.tag
#> NULL
#>
#> $gvis.tags
#> [1] "type" "chartid" "html" "header"
#> [5] "chart" "jsHeader" "jsData" "jsDrawChart"
#> [9] "jsDisplayChart" "jsFooter" "jsChart" "divChart"
#> [13] "caption" "footer"
#>
M <- gvisMotionChart(Fruits, "Fruit", "Year")
#> Warning: Flash charts are no longer supported by most browsers.
#> An alternative is plotly::ggplotly.
#> For more see https://plotly.com/r/animations/#mulitple-trace-animations
str(M)
#> List of 3
#> $ type : chr "MotionChart"
#> $ chartid: chr "MotionChartID172f5d0688d2"
#> $ html :List of 4
#> ..$ header : chr "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n \"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict."| __truncated__
#> ..$ chart : Named chr [1:7] "<!-- MotionChart generated in R 4.4.0 by googleVis 0.7.3 package -->\n<!-- Sat May 25 14:39:42 2024 -->\n\n\n<!"| __truncated__ "\n// jsData \nfunction gvisDataMotionChartID172f5d0688d2 () {\nvar data = new google.visualization.DataTable();"| __truncated__ "\n// jsDrawChart\nfunction drawChartMotionChartID172f5d0688d2() {\nvar data = gvisDataMotionChartID172f5d0688d2"| __truncated__ "\n// jsDisplayChart\n(function() {\nvar pkgs = window.__gvisPackages = window.__gvisPackages || [];\nvar callba"| __truncated__ ...
#> .. ..- attr(*, "names")= chr [1:7] "jsHeader" "jsData" "jsDrawChart" "jsDisplayChart" ...
#> ..$ caption: chr "<div><span>Data: Fruits • Chart ID: <a href=\"Chart_MotionChartID172f5d0688d2.html\">MotionChartID172f5d0"| __truncated__
#> ..$ footer : chr "\n<!-- htmlFooter -->\n<span> \n R version 4.4.0 (2024-04-24) \n • <a href=\"https://developers.google."| __truncated__
#> - attr(*, "class")= chr [1:2] "gvis" "list"
## The output for a complete web page
M
#> <!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>MotionChartID172f5d0688d2</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>
#> <!-- MotionChart generated in R 4.4.0 by googleVis 0.7.3 package -->
#> <!-- Sat May 25 14:39:42 2024 -->
#>
#>
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>
#> // jsData
#> function gvisDataMotionChartID172f5d0688d2 () {
#> 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 drawChartMotionChartID172f5d0688d2() {
#> var data = gvisDataMotionChartID172f5d0688d2();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#>
#>
#> var chart = new google.visualization.MotionChart(
#> document.getElementById('MotionChartID172f5d0688d2')
#> );
#> 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(drawChartMotionChartID172f5d0688d2);
#> })();
#> function displayChartMotionChartID172f5d0688d2() {
#> 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=displayChartMotionChartID172f5d0688d2"></script>
#>
#> <!-- divChart -->
#>
#> <div id="MotionChartID172f5d0688d2"
#> style="width: 600; height: 500;">
#> </div>
#> <div><span>Data: Fruits • Chart ID: <a href="Chart_MotionChartID172f5d0688d2.html">MotionChartID172f5d0688d2</a> • <a href="https://mages.github.io/googleVis/">googleVis-0.7.3</a></span><br />
#> <!-- htmlFooter -->
#> <span>
#> R version 4.4.0 (2024-04-24)
#> • <a href="https://developers.google.com/terms/">Google Terms of Use</a> • <a href="https://developers.google.com/chart/interactive/docs/gallery/motionchart">Documentation and Data Policy</a>
#> </span></div>
#> </body>
#> </html>
## Access only the plot,
M$html$chart
#> jsHeader
#> "<!-- MotionChart generated in R 4.4.0 by googleVis 0.7.3 package -->\n<!-- Sat May 25 14:39:42 2024 -->\n\n\n<!-- jsHeader -->\n<script type=\"text/javascript\">\n"
#> jsData
#> "\n// jsData \nfunction gvisDataMotionChartID172f5d0688d2 () {\nvar data = new google.visualization.DataTable();\nvar datajson =\n[\n [\n\"Apples\",\n2008,\n\"West\",\n98,\n78,\n20,\n\"2008-12-31\"\n],\n[\n\"Apples\",\n2009,\n\"West\",\n111,\n79,\n32,\n\"2009-12-31\"\n],\n[\n\"Apples\",\n2010,\n\"West\",\n89,\n76,\n13,\n\"2010-12-31\"\n],\n[\n\"Oranges\",\n2008,\n\"East\",\n96,\n81,\n15,\n\"2008-12-31\"\n],\n[\n\"Bananas\",\n2008,\n\"East\",\n85,\n76,\n9,\n\"2008-12-31\"\n],\n[\n\"Oranges\",\n2009,\n\"East\",\n93,\n80,\n13,\n\"2009-12-31\"\n],\n[\n\"Bananas\",\n2009,\n\"East\",\n94,\n78,\n16,\n\"2009-12-31\"\n],\n[\n\"Oranges\",\n2010,\n\"East\",\n98,\n91,\n7,\n\"2010-12-31\"\n],\n[\n\"Bananas\",\n2010,\n\"East\",\n81,\n71,\n10,\n\"2010-12-31\"\n] \n];\ndata.addColumn('string','Fruit');\ndata.addColumn('number','Year');\ndata.addColumn('string','Location');\ndata.addColumn('number','Sales');\ndata.addColumn('number','Expenses');\ndata.addColumn('number','Profit');\ndata.addColumn('string','Date');\ndata.addRows(datajson);\nreturn(data);\n}\n"
#> jsDrawChart
#> "\n// jsDrawChart\nfunction drawChartMotionChartID172f5d0688d2() {\nvar data = gvisDataMotionChartID172f5d0688d2();\nvar options = {};\noptions[\"width\"] = 600;\noptions[\"height\"] = 500;\noptions[\"state\"] = \"\";\n\n\n var chart = new google.visualization.MotionChart(\n document.getElementById('MotionChartID172f5d0688d2')\n );\n chart.draw(data,options);\n \n\n}\n \n"
#> jsDisplayChart
#> "\n// jsDisplayChart\n(function() {\nvar pkgs = window.__gvisPackages = window.__gvisPackages || [];\nvar callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];\nvar chartid = \"motionchart\";\n \n// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)\nvar i, newPackage = true;\nfor (i = 0; newPackage && i < pkgs.length; i++) {\nif (pkgs[i] === chartid)\nnewPackage = false;\n}\nif (newPackage)\n pkgs.push(chartid);\n \n// Add the drawChart function to the global list of callbacks\ncallbacks.push(drawChartMotionChartID172f5d0688d2);\n})();\nfunction displayChartMotionChartID172f5d0688d2() {\n var pkgs = window.__gvisPackages = window.__gvisPackages || [];\n var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];\n window.clearTimeout(window.__gvisLoad);\n // The timeout is set to 100 because otherwise the container div we are\n // targeting might not be part of the document yet\n window.__gvisLoad = setTimeout(function() {\n var pkgCount = pkgs.length;\n google.load(\"visualization\", \"1\", { packages:pkgs, callback: function() {\n if (pkgCount != pkgs.length) {\n // Race condition where another setTimeout call snuck in after us; if\n // that call added a package, we must not shift its callback\n return;\n}\nwhile (callbacks.length > 0)\ncallbacks.shift()();\n} });\n}, 100);\n}\n"
#> jsFooter
#> "\n// jsFooter\n</script>\n"
#> jsChart
#> "\n<!-- jsChart --> \n<script type=\"text/javascript\" src=\"https://www.google.com/jsapi?callback=displayChartMotionChartID172f5d0688d2\"></script>\n"
#> divChart
#> "\n<!-- divChart -->\n \n<div id=\"MotionChartID172f5d0688d2\" \n style=\"width: 600; height: 500;\">\n</div>\n"
## wrap it in cat and it becomes more readable,
cat(unlist(M$html$chart))
#> <!-- MotionChart generated in R 4.4.0 by googleVis 0.7.3 package -->
#> <!-- Sat May 25 14:39:42 2024 -->
#>
#>
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>
#> // jsData
#> function gvisDataMotionChartID172f5d0688d2 () {
#> 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 drawChartMotionChartID172f5d0688d2() {
#> var data = gvisDataMotionChartID172f5d0688d2();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#>
#>
#> var chart = new google.visualization.MotionChart(
#> document.getElementById('MotionChartID172f5d0688d2')
#> );
#> 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(drawChartMotionChartID172f5d0688d2);
#> })();
#> function displayChartMotionChartID172f5d0688d2() {
#> 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=displayChartMotionChartID172f5d0688d2"></script>
#>
#> <!-- divChart -->
#>
#> <div id="MotionChartID172f5d0688d2"
#> style="width: 600; height: 500;">
#> </div>
## or use the print function.
print(M, tag="chart")
#> <!-- MotionChart generated in R 4.4.0 by googleVis 0.7.3 package -->
#> <!-- Sat May 25 14:39:42 2024 -->
#>
#>
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>
#> // jsData
#> function gvisDataMotionChartID172f5d0688d2 () {
#> 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 drawChartMotionChartID172f5d0688d2() {
#> var data = gvisDataMotionChartID172f5d0688d2();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#>
#>
#> var chart = new google.visualization.MotionChart(
#> document.getElementById('MotionChartID172f5d0688d2')
#> );
#> 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(drawChartMotionChartID172f5d0688d2);
#> })();
#> function displayChartMotionChartID172f5d0688d2() {
#> 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=displayChartMotionChartID172f5d0688d2"></script>
#>
#> <!-- divChart -->
#>
#> <div id="MotionChartID172f5d0688d2"
#> style="width: 600; height: 500;">
#> </div>
## Extract the data as a JavaScript function.
print(M, tag="jsData")
#>
#> // jsData
#> function gvisDataMotionChartID172f5d0688d2 () {
#> 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);
#> }
## Display the visualisation.
## A web browser with Internet connection and Flash is required.
plot(M)
## Combine with another chart, e.g. table
#tbl <- gvisTable(Fruits, options=list(height=220))
#Mtbl <- gvisMerge(M, tbl)
#plot(Mtbl)
## Example of using googleVis with knitr and markdown
if (FALSE) {
## Simple knitr/markdown file with googleVis
knitrRmd <-"
# Markdown example with knitr and googleVis
===========================================
This is a little Markdown example file.
Set the googleVis options first.
In this case change the behaviour of plot.gvis
```{r setOptions, message=FALSE}
library(googleVis)
op <- options(gvis.plot.tag='chart')
```
The following plot statements will automatically return the HTML
required for the 'knitted' output.
## Combo chart
```{r ComboExample, results='asis', tidy=FALSE}
## Add the mean
CityPopularity$Mean=mean(CityPopularity$Popularity)
CC <- gvisComboChart(CityPopularity, xvar='City',
yvar=c('Mean', 'Popularity'),
options=list(seriesType='bars',
width=450, height=300,
title='City Popularity',
series='{0: {type:\"line\"}}'))
plot(CC)
```
Example of gvisComboChart with R code shown above.
## Place two charts next to each other
```{r gvisMergeExample, results='asis', echo=FALSE}
Geo <- gvisGeoChart(Exports, locationvar='Country', colorvar='Profit',
options=list(height=300, width=350))
Tbl <- gvisTable(Exports, options=list(height=300, width=200))
plot(gvisMerge(Geo, Tbl, horizontal=TRUE))
``````
Example of a gvisGeoChart with gvisTable and R code hidden.
## Motion Chart
```{r MotionChartExample, results='asis', tidy=FALSE}
M <- gvisMotionChart(Fruits, 'Fruit', 'Year',
options=list(width=400, height=350))
plot(M)
```
Please note that the Motion Chart is only displayed when hosted on a
web server, or is placed in a directory which has been added to the
trusted sources in the [security settings of Macromedia]
(https://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html).
See the googleVis package vignette for more details.
```{r resetOptions}
## Set options back to original options
options(op)
```
"
## Write the content of knitrRmd into a Rmd-file, knit it and convert it
## into a html output. Finally show the file with the R-help http
## server, this will ensure that also the motion chart is visible.
library(knitr)
library(markdown)
wd <- getwd()
setwd(tempdir())
fn=tempfile()
fn.Rmd <- paste(fn, ".Rmd", sep="")
fn.md <- paste(fn, ".md", sep="")
fn.html <- paste(fn, "-out.html", sep="")
## Write R Markdown into a file
cat(knitrRmd, file=fn.Rmd)
render_markdown()
knit(fn.Rmd, fn.md)
knit2html(fn.md)
## Open output in browser
## Use plot.gvis which will use the R-help http server
## The URL will start with http://127.0.0.1...
## The HTML file will be copied into a temporary directory
plot.gvis(fn.html)
## Compare to browseURL, its URL will start with file://... the motion
## chart is unlikely to be displayed because of Flash security
## settings. See the googleVis vignette for more details.
browseURL(fn.html)
setwd(wd)
}
if (FALSE) {
## Updating the data of an existing googleVis web page
## Suppose you have an existing web page in which you embedded a
## motion chart with the id "mtnc".
## Now you have a new set of data, but you would like to avoid
## touching the html file again.
## The idea is to write the data and JavaScript functions into separate
## files and to refer to these in the html page.
## In this example we call the chart id "mtnc"
## To display the example we use the R HTTP server again, and
## write the files into a temp directory
myChartID <- "mtnc"
## baseURL should reflect your web address, e.g. http://myHomePage.com
baseURL <- sprintf("http://127.0.0.1:%s/custom/googleVis", tools:::httpdPort)
wwwdir <- tempdir() ## the www repository on your computer
## Create a motion chart
M=gvisMotionChart(Fruits, "Fruit", "Year", chartid=myChartID)
## Here is our plot again
plot(M)
## Write the data and functions into separate files:
cat(M$html$chart['jsData'], file=file.path(wwwdir, "gvisData.js"))
cat(M$html$chart[c('jsDrawChart', 'jsDisplayChart', 'jsChart')],
file=file.path(wwwdir, "gvisFunctions.js"))
## Create a html page with reference to the above
## JavaScript files
html <- sprintf('
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript" src="%s/gvisFunctions.js"></script>
<script type="text/javascript" src="%s/gvisData.js"></script>
<script type="text/javascript">
displayChart%s()
</script>
</head>
<body>
<div id="%s" style="width: 600px; height: 500px;"></div>
</body>
</html>
', baseURL, baseURL, myChartID, myChartID)
## Write html scaffold into a file
cat(html, file=file.path(wwwdir, paste("Chart", myChartID, ".html", sep="")))
## Display the result via
URL <- paste(baseURL,"/Chart", myChartID, ".html", sep="")
browseURL(URL)
## Update the data, say the data should have shown North and South
## instead of East and West as a location
FruitsUpdate <- Fruits
levels(FruitsUpdate$Location)=c("North", "South")
Mupdate=gvisMotionChart(FruitsUpdate, "Fruit", "Year", chartid=myChartID)
## Only update the file gvisData.js:
cat(Mupdate$html$chart['jsData'], file=file.path(wwwdir, "gvisData.js"))
## Redisplay the chart with the updated data
browseURL(URL)
}