ramnathv/gvis_iframe.html

## gvis_iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://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.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="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/default.css" media="all" >
  <link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/phone.css"
    media="only screen and (max-device-width: 480px)" >
  <link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/slidify.css" >
  <link rel="stylesheet" href="http://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="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
  <script>window.jQuery || document.write('<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/widgets/quiz/js/jquery.js"><\/script>')</script>
  <script data-main="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/slides"
    src="http://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=http://nvd3.org/src/nv.d3.css></p>

<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>

  </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="http://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="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- DONE LOADING HIGHLIGHTER JS FILES -->

  </html>

## index.md

      
    Raw
  

              index.md
            
          
  title
  author
  hitheme
  mode
  
  
  rCharts with Slidify
  Ramnath Vaidyanathan
  solarized_light
  standalone
  
  
Note

This is a short demo of how to embed a plot created using rCharts in a knitr document. In short, there are two ways to embed your plot:

IFrame
Inline

You can view the source of this slide deck here

Create Plot

Let us first create a plot that we would like to embed
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.
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.
n1$show("inline", include_assets = TRUE, cdn = TRUE)

<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>

<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

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

plot(Bar1, tag = "chart")


<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>
  
<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartBarChartIDc9477098969d"></script>


Embed Plot as IFrame

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

  
## 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>")
```


## nvd3_iframe.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
    <script src='http://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>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://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 • Chart ID: <a href="Chart_BarChartIDc9477098969d.html">BarChartIDc9477098969d</a></span><br />
	<!-- htmlFooter -->
	<span>
	R version 3.0.2 (2013-09-25) • <a href="http://code.google.com/p/google-motion-charts-with-r/">googleVis-0.4.7</a>
	• <a href="https://developers.google.com/terms/">Google Terms of Use</a> • <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart.html#Data_Policy">Data Policy</a>
	</span></div>
	</body>
	</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="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/default.css" media="all" >
	<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/phone.css"
	media="only screen and (max-device-width: 480px)" >
	<link rel="stylesheet" href="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/css/slidify.css" >
	<link rel="stylesheet" href="http://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="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="http://slidifylibraries2.googlecode.com/git/inst/libraries/widgets/quiz/js/jquery.js"><\/script>')</script>
	<script data-main="http://slidifylibraries2.googlecode.com/git/inst/libraries/frameworks/io2012/js/slides"
	src="http://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 <- subset(as.data.frame(HairEyeColor), Sex == "Male")
	n1 <- nPlot(Freq ~ Hair, group = "Eye", data = dat, type = "multiBarChart")
	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('iframe') 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("inline", include_assets = TRUE, cdn = TRUE)
	</code></pre>

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

	<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>

	</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 <- 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"))
	</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 = "chart")
	</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 = "html", file = "gvis_iframe.html")
	cat("<iframe src='gvis_iframe.html'></iframe>")
	</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="http://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="http://slidifylibraries2.googlecode.com/git/inst/libraries/highlighters/highlight.js/highlight.pack.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>
	<!-- DONE LOADING HIGHLIGHTER JS FILES -->

	</html>
	---
	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>")
	```
	<!doctype HTML>
	<meta charset = 'utf-8'>
	<html>
	<head>
	<link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'>

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
	<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
	<script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
	<script src='http://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>