Skip to contents

Create a Google Gadget based on a Google Visualisation Object

Usage

createGoogleGadget(gvis)

Arguments

gvis

an object of class 'gvis', e.g. output of a googleVis visualisation functions.

Value

createGoogleGadget returns a Google Gadget XML string.

References

For more information about Google Gadgets see: https://developers.google.com/gadgets/

Author

Markus Gesmann

Note

Google Gadgets can be embedded in various Google products, for example as part of a Google Code wiki page, Blogger or Google Sites. In all cases the XML gadget file has to be hosted online, e.g. using Google Docs.

In Blogger the gadgets can be embedded via the design tab, and in a Google Sites via the menu "Insert" -> "More gadgets ..." -> "Add gadget ULR".

In a Google Code wiki the gadget can be embedded via

<wiki:gadget url="https://example.com/gadget.xml" height="200" border="0" />

See also

See also as print.gvis, cat

Examples

M <- gvisMotionChart(Fruits, idvar="Fruit", timevar="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
gdgt <- createGoogleGadget(M)
cat(gdgt)
#> <?xml version="1.0" encoding="UTF-8" ?> 
#> <Module>
#>   <ModulePrefs title="MotionChartID160324345645" />
#>   <Content type="html">
#>   <![CDATA[ 
#>    <!-- MotionChart generated in R 4.2.2 by googleVis 0.7.1 package -->
#> <!-- Wed Mar  1 20:20:51 2023 -->
#> 
#> 
#> <!-- jsHeader -->
#> <script type="text/javascript">
#> 
#> 
#> // jsData 
#> function gvisDataMotionChartID160324345645 () {
#> 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 drawChartMotionChartID160324345645() {
#> var data = gvisDataMotionChartID160324345645();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#> 
#> 
#>     var chart = new google.visualization.MotionChart(
#>     document.getElementById('MotionChartID160324345645')
#>     );
#>     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(drawChartMotionChartID160324345645);
#> })();
#> function displayChartMotionChartID160324345645() {
#>   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=displayChartMotionChartID160324345645"></script>
#> 
#> 
#> <!-- divChart -->
#>   
#> <div id="MotionChartID160324345645" 
#>   style="width: 600; height: 500;">
#> </div>
#> 
#>   ]]> 
#>   </Content>
#> </Module>