Skip to contents

Methods to print and plot gvis objects

Usage

# S3 method for gvis
print(x, tag=NULL, file = "", ...)
    
# S3 method for gvis
plot(x, tag=NULL,...)

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 of getOption("gvis.print.tag"), getOption("gvis.plot.tag") will be used for print.gvis and plot.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 means print.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 is NULL, which will result in R opening a browser window, while any tag which is not NULL will give the same behaviour as print.gvis, e.g. tag='chart' or setting options(gvis.plot.tag='chart') will produce the same output as print(x, tag='chart'). This behaviour is particular helpful when googleVis is used in scripts, like knitr or R.rsp. The plot commands can be used initially in an interactive mode and with one change in options() produce the HTML output required for a programmatic run of the script. See the example section below for a knitr case study.

plot.gvis ignores the argument tag it x 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) or browseURL (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.

Value

print.gvis

None (invisible NULL).

plot.gvis

Returns the file name invisibly.

References

Please see also the package vignette for the usage of the googleVis package with RApache, brew, knitr and R.rsp.

Author

Markus Gesmann markus.gesmann@gmail.com,

Diego de Castillo decastillo@gmail.com

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 "MotionChartID16037306eb5a"
#>  $ 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.2.2 by googleVis 0.7.1 package -->\n<!-- Wed Mar  1 20:21:01 2023 -->\n\n\n<!"| __truncated__ "\n// jsData \nfunction gvisDataMotionChartID16037306eb5a () {\nvar data = new google.visualization.DataTable();"| __truncated__ "\n// jsDrawChart\nfunction drawChartMotionChartID16037306eb5a() {\nvar data = gvisDataMotionChartID16037306eb5a"| __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 &#8226; Chart ID: <a href=\"Chart_MotionChartID16037306eb5a.html\">MotionChartID1603730"| __truncated__
#>   ..$ footer : chr "\n<!-- htmlFooter -->\n<span> \n  R version 4.2.2 (2022-10-31) \n  &#8226; <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>MotionChartID16037306eb5a</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.2.2 by googleVis 0.7.1 package -->
#> <!-- Wed Mar  1 20:21:01 2023 -->
#> 
#> 
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>  
#> // jsData 
#> function gvisDataMotionChartID16037306eb5a () {
#> 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 drawChartMotionChartID16037306eb5a() {
#> var data = gvisDataMotionChartID16037306eb5a();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#> 
#> 
#>     var chart = new google.visualization.MotionChart(
#>     document.getElementById('MotionChartID16037306eb5a')
#>     );
#>     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(drawChartMotionChartID16037306eb5a);
#> })();
#> function displayChartMotionChartID16037306eb5a() {
#>   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=displayChartMotionChartID16037306eb5a"></script>
#>  
#> <!-- divChart -->
#>   
#> <div id="MotionChartID16037306eb5a" 
#>   style="width: 600; height: 500;">
#> </div>
#>  <div><span>Data: Fruits &#8226; Chart ID: <a href="Chart_MotionChartID16037306eb5a.html">MotionChartID16037306eb5a</a> &#8226; <a href="https://mages.github.io/googleVis/">googleVis-0.7.1</a></span><br /> 
#> <!-- htmlFooter -->
#> <span> 
#>   R version 4.2.2 (2022-10-31) 
#>   &#8226; <a href="https://developers.google.com/terms/">Google Terms of Use</a> &#8226; <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.2.2 by googleVis 0.7.1 package -->\n<!-- Wed Mar  1 20:21:01 2023 -->\n\n\n<!-- jsHeader -->\n<script type=\"text/javascript\">\n" 
#>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  jsData 
#>                                                                                                                                                                                                                                                                                                                      "\n// jsData \nfunction gvisDataMotionChartID16037306eb5a () {\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 drawChartMotionChartID16037306eb5a() {\nvar data = gvisDataMotionChartID16037306eb5a();\nvar options = {};\noptions[\"width\"] = 600;\noptions[\"height\"] = 500;\noptions[\"state\"] = \"\";\n\n\n    var chart = new google.visualization.MotionChart(\n    document.getElementById('MotionChartID16037306eb5a')\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(drawChartMotionChartID16037306eb5a);\n})();\nfunction displayChartMotionChartID16037306eb5a() {\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=displayChartMotionChartID16037306eb5a\"></script>\n" 
#>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                divChart 
#>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      "\n<!-- divChart -->\n  \n<div id=\"MotionChartID16037306eb5a\" \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.2.2 by googleVis 0.7.1 package -->
#> <!-- Wed Mar  1 20:21:01 2023 -->
#> 
#> 
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>  
#> // jsData 
#> function gvisDataMotionChartID16037306eb5a () {
#> 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 drawChartMotionChartID16037306eb5a() {
#> var data = gvisDataMotionChartID16037306eb5a();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#> 
#> 
#>     var chart = new google.visualization.MotionChart(
#>     document.getElementById('MotionChartID16037306eb5a')
#>     );
#>     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(drawChartMotionChartID16037306eb5a);
#> })();
#> function displayChartMotionChartID16037306eb5a() {
#>   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=displayChartMotionChartID16037306eb5a"></script>
#>  
#> <!-- divChart -->
#>   
#> <div id="MotionChartID16037306eb5a" 
#>   style="width: 600; height: 500;">
#> </div>

## or use the print function.
print(M, tag="chart")
#> <!-- MotionChart generated in R 4.2.2 by googleVis 0.7.1 package -->
#> <!-- Wed Mar  1 20:21:01 2023 -->
#> 
#> 
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>  
#> // jsData 
#> function gvisDataMotionChartID16037306eb5a () {
#> 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 drawChartMotionChartID16037306eb5a() {
#> var data = gvisDataMotionChartID16037306eb5a();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#> 
#> 
#>     var chart = new google.visualization.MotionChart(
#>     document.getElementById('MotionChartID16037306eb5a')
#>     );
#>     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(drawChartMotionChartID16037306eb5a);
#> })();
#> function displayChartMotionChartID16037306eb5a() {
#>   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=displayChartMotionChartID16037306eb5a"></script>
#>  
#> <!-- divChart -->
#>   
#> <div id="MotionChartID16037306eb5a" 
#>   style="width: 600; height: 500;">
#> </div>

## Extract the data as a JavaScript function.
print(M, tag="jsData")
#> 
#> // jsData 
#> function gvisDataMotionChartID16037306eb5a () {
#> 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)

}