7750500 by ramnathv

index.html

<!DOCTYPE html>
<html>
<head>
  <title>rCharts with Slidify</title>
  <meta charset="utf-8">
  <meta name="description" content="rCharts with Slidify">
  <meta name="author" content="Ramnath Vaidyanathan">
  <meta name="generator" content="slidify" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/default.css" media="all" >
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/phone.css" 
    media="only screen and (max-device-width: 480px)" >
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/slidify.css" >
  <link rel="stylesheet" href="//slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/css/solarized_light.css" />
  <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->  
  
  <!-- Grab CDN jQuery, fall back to local if offline -->
  <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
  <script>window.jQuery || document.write('<script src="//slidifylibraries2.googlecode.com/git/inst/libraries/widgets/quiz/js/jquery.js"><\/script>')</script> 
  <script data-main="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/slides" 
    src="//slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/require-1.0.8.min.js">
  </script>
  
  

</head>
<body style="opacity: 0">
  <slides class="layout-widescreen">
    
    <!-- LOGO SLIDE -->
        <slide class="title-slide segue nobackground">
  <hgroup class="auto-fadein">
    <h1>rCharts with Slidify</h1>
    <h2></h2>
    <p>Ramnath Vaidyanathan<br/></p>
  </hgroup>
  <article></article>  
</slide>
    

    <!-- SLIDES -->
    <slide class="" id="slide-1" style="background:;">
  <hgroup>
    <h2>Note</h2>
  </hgroup>
  <article data-timings="">
    <p>This is a short demo of how to embed a plot created using <a href="http;//rcharts.io">rCharts</a> in a <code>knitr</code> document. In short, there are two ways to embed your plot:</p>

<ol>
<li>IFrame</li>
<li>Inline</li>
</ol>

<p>You can view the source of this slide deck <a href="index.Rmd">here</a></p>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-2" style="background:;">
  <hgroup>
    <h2>Create Plot</h2>
  </hgroup>
  <article data-timings="">
    <p>Let us first create a plot that we would like to embed</p>

<pre><code class="r">library(rCharts)
dat &lt;- subset(as.data.frame(HairEyeColor), Sex == &quot;Male&quot;)
n1 &lt;- nPlot(Freq ~ Hair, group = &quot;Eye&quot;, data = dat, type = &quot;multiBarChart&quot;)
n1$set(width = 800, height = 350)
</code></pre>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-3" style="background:;">
  <hgroup>
    <h2>Embed Plot as IFrame</h2>
  </hgroup>
  <article data-timings="">
    <p>By default, rCharts will save the plot to file and embed as an <code>iframe</code>. </p>

<pre><code class="r">n1  # equivalent to n1$show(&#39;iframe&#39;) in Rmd
</code></pre>

<iframe src=./nvd3_iframe.html seamless></iframe>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-4" style="background:;">
  <hgroup>
    <h2>Embed Plot Inline</h2>
  </hgroup>
  <article data-timings="">
    <p>You can also include the plot inline by invoking the <code>show</code> method with <code>inline</code> mode. Note that you need to set <code>include_assets = T</code> and <code>cdn = T</code> so that the js/css assets are included and delivered from an online CDN.</p>

<pre><code class="r">n1$show(&quot;inline&quot;, include_assets = TRUE, cdn = TRUE)
</code></pre>

<p><link rel='stylesheet' href=//nvd3.org/src/nv.d3.css></p>

<script type='text/javascript' src=//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>

<script type='text/javascript' src=//d3js.org/d3.v3.min.js></script>

<script type='text/javascript' src=//timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js></script>

<script type='text/javascript' src=//nvd3.org/lib/fisheye.js></script>

<div id = 'chartc9475644abf6' class = 'rChart nvd3'></div>

<script type='text/javascript'>
 $(document).ready(function(){
      drawchartc9475644abf6()
    });
    function drawchartc9475644abf6(){  
      var opts = {
 "dom": "chartc9475644abf6",
"width":    800,
"height":    350,
"x": "Hair",
"y": "Freq",
"group": "Eye",
"type": "multiBarChart",
"id": "chartc9475644abf6" 
},
        data = [
 {
 "Hair": "Black",
"Eye": "Brown",
"Sex": "Male",
"Freq":             32 
},
{
 "Hair": "Brown",
"Eye": "Brown",
"Sex": "Male",
"Freq":             53 
},
{
 "Hair": "Red",
"Eye": "Brown",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Brown",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Black",
"Eye": "Blue",
"Sex": "Male",
"Freq":             11 
},
{
 "Hair": "Brown",
"Eye": "Blue",
"Sex": "Male",
"Freq":             50 
},
{
 "Hair": "Red",
"Eye": "Blue",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Blue",
"Sex": "Male",
"Freq":             30 
},
{
 "Hair": "Black",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Brown",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             25 
},
{
 "Hair": "Red",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              5 
},
{
 "Hair": "Black",
"Eye": "Green",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Brown",
"Eye": "Green",
"Sex": "Male",
"Freq":             15 
},
{
 "Hair": "Red",
"Eye": "Green",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Green",
"Sex": "Male",
"Freq":              8 
} 
]
  
      if(!(opts.type==="pieChart" || opts.type==="sparklinePlus")) {
        var data = d3.nest()
          .key(function(d){
            //return opts.group === undefined ? 'main' : d[opts.group]
            //instead of main would think a better default is opts.x
            return opts.group === undefined ? opts.y : d[opts.group];
          })
          .entries(data);
      }
      
      if (opts.disabled != undefined){
        data.map(function(d, i){
          d.disabled = opts.disabled[i]
        })
      }
      
      nv.addGraph(function() {
        var chart = nv.models[opts.type]()
          .x(function(d) { return d[opts.x] })
          .y(function(d) { return d[opts.y] })
          .width(opts.width)
          .height(opts.height)
         
        
          
        

        
        
        
      
       d3.select("#" + opts.id)
        .append('svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

       nv.utils.windowResize(chart.update);
       return chart;
      });
    };
</script>

<style>.rChart {height: 400px;}</style>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-5" style="background:;">
  <hgroup>
    <h2>Create googleVis Chart</h2>
  </hgroup>
  <article data-timings="">
    <pre><code class="r">library(googleVis)
df &lt;- data.frame(country = c(&quot;US&quot;, &quot;GB&quot;, &quot;BR&quot;), val1 = c(1,3,4), val2 = c(23,12,32))
Bar1 &lt;- gvisBarChart(df, xvar=&quot;country&quot;, yvar=c(&quot;val1&quot;, &quot;val2&quot;))
</code></pre>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-6" style="background:;">
  <hgroup>
    <h2>Embed Plot Inline</h2>
  </hgroup>
  <article data-timings="">
    <pre><code class="r">plot(Bar1, tag = &quot;chart&quot;)
</code></pre>

<!-- BarChart generated in R 3.0.2 by googleVis 0.4.7 package -->

<!-- Mon Dec  2 09:56:38 2013 -->

<!-- jsHeader -->

<script type="text/javascript">
 
// jsData 
function gvisDataBarChartIDc9477098969d () {
var data = new google.visualization.DataTable();
var datajson =
[
 [
 "US",
1,
23 
],
[
 "GB",
3,
12 
],
[
 "BR",
4,
32 
] 
];
data.addColumn('string','country');
data.addColumn('number','val1');
data.addColumn('number','val2');
data.addRows(datajson);
return(data);
}
 
// jsDrawChart
function drawChartBarChartIDc9477098969d() {
var data = gvisDataBarChartIDc9477098969d();
var options = {};
options["allowHtml"] = true;

    var chart = new google.visualization.BarChart(
    document.getElementById('BarChartIDc9477098969d')
    );
    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(drawChartBarChartIDc9477098969d);
})();
function displayChartBarChartIDc9477098969d() {
  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=displayChartBarChartIDc9477098969d"></script>
 

<!-- divChart -->

<div id="BarChartIDc9477098969d"
  style="width: 600px; height: 500px;">
</div>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-7" style="background:;">
  <hgroup>
    <h2>Embed Plot as IFrame</h2>
  </hgroup>
  <article data-timings="">
    <pre><code class="r">print(Bar1, tag = &quot;html&quot;, file = &quot;gvis_iframe.html&quot;)
cat(&quot;&lt;iframe src=&#39;gvis_iframe.html&#39;&gt;&lt;/iframe&gt;&quot;)
</code></pre>

<iframe src='gvis_iframe.html'></iframe>

  </article>
  <!-- Presenter Notes -->
</slide>

    <slide class="backdrop"></slide>
  </slides>
  <div class="pagination pagination-small" id='io2012-ptoc' style="display:none;">
    <ul>
      <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=1 title='Note'>
         1
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=2 title='Create Plot'>
         2
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=3 title='Embed Plot as IFrame'>
         3
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=4 title='Embed Plot Inline'>
         4
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=5 title='Create googleVis Chart'>
         5
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=6 title='Embed Plot Inline'>
         6
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=7 title='Embed Plot as IFrame'>
         7
      </a>
    </li>
  </ul>
  </div>  <!--[if IE]>
    <script 
      src="//ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">  
    </script>
    <script>CFInstall.check({mode: 'overlay'});</script>
  <![endif]-->
</body>
  <!-- Load Javascripts for Widgets -->
  
  <!-- LOAD HIGHLIGHTER JS FILES -->
  <script src="//slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- DONE LOADING HIGHLIGHTER JS FILES -->
   
  </html>

gvis_iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title>BarChartIDc9477098969d</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>
 <!-- BarChart generated in R 3.0.2 by googleVis 0.4.7 package -->
<!-- Mon Dec  2 09:56:38 2013 -->


<!-- jsHeader -->
<script type="text/javascript">
 
// jsData 
function gvisDataBarChartIDc9477098969d () {
var data = new google.visualization.DataTable();
var datajson =
[
 [
 "US",
1,
23 
],
[
 "GB",
3,
12 
],
[
 "BR",
4,
32 
] 
];
data.addColumn('string','country');
data.addColumn('number','val1');
data.addColumn('number','val2');
data.addRows(datajson);
return(data);
}
 
// jsDrawChart
function drawChartBarChartIDc9477098969d() {
var data = gvisDataBarChartIDc9477098969d();
var options = {};
options["allowHtml"] = true;


    var chart = new google.visualization.BarChart(
    document.getElementById('BarChartIDc9477098969d')
    );
    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(drawChartBarChartIDc9477098969d);
})();
function displayChartBarChartIDc9477098969d() {
  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=displayChartBarChartIDc9477098969d"></script>
 
<!-- divChart -->
  
<div id="BarChartIDc9477098969d"
  style="width: 600px; height: 500px;">
</div>
 <div><span>Data: data &#8226; Chart ID: <a href="Chart_BarChartIDc9477098969d.html">BarChartIDc9477098969d</a></span><br /> 
<!-- htmlFooter -->
<span> 
  R version 3.0.2 (2013-09-25) &#8226; <a href="//code.google.com/p/google-motion-charts-with-r/">googleVis-0.4.7</a>
  &#8226; <a href="https://developers.google.com/terms/">Google Terms of Use</a> &#8226; <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart.html#Data_Policy">Data Policy</a>
</span></div>
</body>
</html>

index.Rmd

---
title: rCharts with Slidify
author: Ramnath Vaidyanathan
hitheme: solarized_light
mode: standalone
---

## Note

This is a short demo of how to embed a plot created using [rCharts](http;//rcharts.io) in a `knitr` document. In short, there are two ways to embed your plot:

1. IFrame
2. Inline

You can view the source of this slide deck [here](index.Rmd)

---

## Create Plot

Let us first create a plot that we would like to embed

```{r results = 'asis', comment = NA}
library(rCharts)
dat <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Hair, group = "Eye", data = dat, type = "multiBarChart")
n1$set(width = 800, height = 350)
```

---

## Embed Plot as IFrame

By default, rCharts will save the plot to file and embed as an `iframe`. 

```{r nvd3_iframe, fig.path = './', results = 'asis', comment = NA}
n1 # equivalent to n1$show('iframe') in Rmd
```

----

## Embed Plot Inline

You can also include the plot inline by invoking the `show` method with `inline` mode. Note that you need to set `include_assets = T` and `cdn = T` so that the js/css assets are included and delivered from an online CDN.

```{r nvd3_inline, results = 'asis', comment = NA, echo = 1}
n1$show('inline', include_assets = TRUE, cdn = TRUE)
cat("<style>.rChart {height: 400px;}</style>")
```

---

## Create googleVis Chart

```{r results = 'asis', comment = NA, message = F, tidy = F}
library(googleVis)
df <- data.frame(country = c("US", "GB", "BR"), val1 = c(1,3,4), val2 = c(23,12,32))
Bar1 <- gvisBarChart(df, xvar="country", yvar=c("val1", "val2"))
```

---

## Embed Plot Inline

```{r results = 'asis', comment = NA, message = F}
plot(Bar1, tag = 'chart')
```

---

## Embed Plot as IFrame

```{r message = F, results = 'asis', comment = NA}
print(Bar1, tag = 'html', file = 'gvis_iframe.html')
cat("<iframe src='gvis_iframe.html'></iframe>")
```

index.md

---
title: rCharts with Slidify
author: Ramnath Vaidyanathan
hitheme: solarized_light
mode: standalone
---

## Note

This is a short demo of how to embed a plot created using [rCharts](http;//rcharts.io) in a `knitr` document. In short, there are two ways to embed your plot:

1. IFrame
2. Inline

You can view the source of this slide deck [here](index.Rmd)

---

## Create Plot

Let us first create a plot that we would like to embed


```r
library(rCharts)
dat <- subset(as.data.frame(HairEyeColor), Sex == "Male")
n1 <- nPlot(Freq ~ Hair, group = "Eye", data = dat, type = "multiBarChart")
n1$set(width = 800, height = 350)
```


---

## Embed Plot as IFrame

By default, rCharts will save the plot to file and embed as an `iframe`. 


```r
n1  # equivalent to n1$show('iframe') in Rmd
```

<iframe src=./nvd3_iframe.html seamless></iframe>


----

## Embed Plot Inline

You can also include the plot inline by invoking the `show` method with `inline` mode. Note that you need to set `include_assets = T` and `cdn = T` so that the js/css assets are included and delivered from an online CDN.


```r
n1$show("inline", include_assets = TRUE, cdn = TRUE)
```

<link rel='stylesheet' href=http://nvd3.org/src/nv.d3.css>
<script type='text/javascript' src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>
<script type='text/javascript' src=http://d3js.org/d3.v3.min.js></script>
<script type='text/javascript' src=http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js></script>
<script type='text/javascript' src=http://nvd3.org/lib/fisheye.js></script>
<div id = 'chartc9475644abf6' class = 'rChart nvd3'></div>
<script type='text/javascript'>
 $(document).ready(function(){
      drawchartc9475644abf6()
    });
    function drawchartc9475644abf6(){  
      var opts = {
 "dom": "chartc9475644abf6",
"width":    800,
"height":    350,
"x": "Hair",
"y": "Freq",
"group": "Eye",
"type": "multiBarChart",
"id": "chartc9475644abf6" 
},
        data = [
 {
 "Hair": "Black",
"Eye": "Brown",
"Sex": "Male",
"Freq":             32 
},
{
 "Hair": "Brown",
"Eye": "Brown",
"Sex": "Male",
"Freq":             53 
},
{
 "Hair": "Red",
"Eye": "Brown",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Brown",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Black",
"Eye": "Blue",
"Sex": "Male",
"Freq":             11 
},
{
 "Hair": "Brown",
"Eye": "Blue",
"Sex": "Male",
"Freq":             50 
},
{
 "Hair": "Red",
"Eye": "Blue",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Blue",
"Sex": "Male",
"Freq":             30 
},
{
 "Hair": "Black",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Brown",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             25 
},
{
 "Hair": "Red",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              5 
},
{
 "Hair": "Black",
"Eye": "Green",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Brown",
"Eye": "Green",
"Sex": "Male",
"Freq":             15 
},
{
 "Hair": "Red",
"Eye": "Green",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Green",
"Sex": "Male",
"Freq":              8 
} 
]
  
      if(!(opts.type==="pieChart" || opts.type==="sparklinePlus")) {
        var data = d3.nest()
          .key(function(d){
            //return opts.group === undefined ? 'main' : d[opts.group]
            //instead of main would think a better default is opts.x
            return opts.group === undefined ? opts.y : d[opts.group];
          })
          .entries(data);
      }
      
      if (opts.disabled != undefined){
        data.map(function(d, i){
          d.disabled = opts.disabled[i]
        })
      }
      
      nv.addGraph(function() {
        var chart = nv.models[opts.type]()
          .x(function(d) { return d[opts.x] })
          .y(function(d) { return d[opts.y] })
          .width(opts.width)
          .height(opts.height)
         
        
          
        

        
        
        
      
       d3.select("#" + opts.id)
        .append('svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

       nv.utils.windowResize(chart.update);
       return chart;
      });
    };
</script>
<style>.rChart {height: 400px;}</style>


---

## Create googleVis Chart


```r
library(googleVis)
df <- data.frame(country = c("US", "GB", "BR"), val1 = c(1,3,4), val2 = c(23,12,32))
Bar1 <- gvisBarChart(df, xvar="country", yvar=c("val1", "val2"))
```


---

## Embed Plot Inline


```r
plot(Bar1, tag = "chart")
```

<!-- BarChart generated in R 3.0.2 by googleVis 0.4.7 package -->
<!-- Mon Dec  2 09:56:38 2013 -->


<!-- jsHeader -->
<script type="text/javascript">
 
// jsData 
function gvisDataBarChartIDc9477098969d () {
var data = new google.visualization.DataTable();
var datajson =
[
 [
 "US",
1,
23 
],
[
 "GB",
3,
12 
],
[
 "BR",
4,
32 
] 
];
data.addColumn('string','country');
data.addColumn('number','val1');
data.addColumn('number','val2');
data.addRows(datajson);
return(data);
}
 
// jsDrawChart
function drawChartBarChartIDc9477098969d() {
var data = gvisDataBarChartIDc9477098969d();
var options = {};
options["allowHtml"] = true;

    var chart = new google.visualization.BarChart(
    document.getElementById('BarChartIDc9477098969d')
    );
    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(drawChartBarChartIDc9477098969d);
})();
function displayChartBarChartIDc9477098969d() {
  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=displayChartBarChartIDc9477098969d"></script>
 
<!-- divChart -->
  
<div id="BarChartIDc9477098969d"
  style="width: 600px; height: 500px;">
</div>


---

## Embed Plot as IFrame


```r
print(Bar1, tag = "html", file = "gvis_iframe.html")
cat("<iframe src='gvis_iframe.html'></iframe>")
```

<iframe src='gvis_iframe.html'></iframe>

nvd3_iframe.html

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='//nvd3.org/src/nv.d3.css'>
    
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script src='//d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='//timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
    <script src='//nvd3.org/lib/fisheye.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block;
      margin-left: auto; 
      margin-right: auto;
      width: 800px;
      height: 350px;
    }  
    </style>
    
  </head>
  <body>
    <div id='chartc9475644abf6' class='rChart nvd3'></div>  
    
    <script type='text/javascript'>
 $(document).ready(function(){
      drawchartc9475644abf6()
    });
    function drawchartc9475644abf6(){  
      var opts = {
 "dom": "chartc9475644abf6",
"width":    800,
"height":    350,
"x": "Hair",
"y": "Freq",
"group": "Eye",
"type": "multiBarChart",
"id": "chartc9475644abf6" 
},
        data = [
 {
 "Hair": "Black",
"Eye": "Brown",
"Sex": "Male",
"Freq":             32 
},
{
 "Hair": "Brown",
"Eye": "Brown",
"Sex": "Male",
"Freq":             53 
},
{
 "Hair": "Red",
"Eye": "Brown",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Brown",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Black",
"Eye": "Blue",
"Sex": "Male",
"Freq":             11 
},
{
 "Hair": "Brown",
"Eye": "Blue",
"Sex": "Male",
"Freq":             50 
},
{
 "Hair": "Red",
"Eye": "Blue",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Blond",
"Eye": "Blue",
"Sex": "Male",
"Freq":             30 
},
{
 "Hair": "Black",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             10 
},
{
 "Hair": "Brown",
"Eye": "Hazel",
"Sex": "Male",
"Freq":             25 
},
{
 "Hair": "Red",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Hazel",
"Sex": "Male",
"Freq":              5 
},
{
 "Hair": "Black",
"Eye": "Green",
"Sex": "Male",
"Freq":              3 
},
{
 "Hair": "Brown",
"Eye": "Green",
"Sex": "Male",
"Freq":             15 
},
{
 "Hair": "Red",
"Eye": "Green",
"Sex": "Male",
"Freq":              7 
},
{
 "Hair": "Blond",
"Eye": "Green",
"Sex": "Male",
"Freq":              8 
} 
]
  
      if(!(opts.type==="pieChart" || opts.type==="sparklinePlus")) {
        var data = d3.nest()
          .key(function(d){
            //return opts.group === undefined ? 'main' : d[opts.group]
            //instead of main would think a better default is opts.x
            return opts.group === undefined ? opts.y : d[opts.group];
          })
          .entries(data);
      }
      
      if (opts.disabled != undefined){
        data.map(function(d, i){
          d.disabled = opts.disabled[i]
        })
      }
      
      nv.addGraph(function() {
        var chart = nv.models[opts.type]()
          .x(function(d) { return d[opts.x] })
          .y(function(d) { return d[opts.y] })
          .width(opts.width)
          .height(opts.height)
         
        
          
        

        
        
        
      
       d3.select("#" + opts.id)
        .append('svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

       nv.utils.windowResize(chart.update);
       return chart;
      });
    };
</script>
    
  </body>
</html>