Create a Google Gadget
createGoogleGadget.RdCreate a Google Gadget based on a Google Visualisation Object
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="MotionChartID172f4f576f75" />
#> <Content type="html">
#> <![CDATA[
#> <!-- MotionChart generated in R 4.4.0 by googleVis 0.7.3 package -->
#> <!-- Sat May 25 14:39:34 2024 -->
#>
#>
#> <!-- jsHeader -->
#> <script type="text/javascript">
#>
#>
#> // jsData
#> function gvisDataMotionChartID172f4f576f75 () {
#> 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 drawChartMotionChartID172f4f576f75() {
#> var data = gvisDataMotionChartID172f4f576f75();
#> var options = {};
#> options["width"] = 600;
#> options["height"] = 500;
#> options["state"] = "";
#>
#>
#> var chart = new google.visualization.MotionChart(
#> document.getElementById('MotionChartID172f4f576f75')
#> );
#> 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(drawChartMotionChartID172f4f576f75);
#> })();
#> function displayChartMotionChartID172f4f576f75() {
#> 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=displayChartMotionChartID172f4f576f75"></script>
#>
#>
#> <!-- divChart -->
#>
#> <div id="MotionChartID172f4f576f75"
#> style="width: 600; height: 500;">
#> </div>
#>
#> ]]>
#> </Content>
#> </Module>