Render rCharts in slides from Slidify

Question

Recently I have been experimenting with slidify and rCharts. Tutorials for generating simple charts while using slidify are explanatory, but I was unable to find any such tutorial regarding rCharts.

For example, I know that the following generates an interactive plot

data(mtcars)    
r1<- rPlot(mpg ~ wt | am + vs, data=mtcars, type="point")
data(iris)
hair_eye = as.data.frame(HairEyeColor)
rPlot(Freq ~ Hair | Eye,color = 'Eye', data = hair_eye, type = 'bar')

However, I have no idea how to incorporate the resulting plot into my slides using slidify.

EDIT - After the helpful comment

I tried the following, having seen it on Ramnath's git:

---
title       : Practice
subtitle    : makes perfect
author      : Noob
job         : 
framework   : io2012        # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      # 
widgets     : [nvd3]            # {mathjax, quiz, bootstrap}
mode        : selfcontained # {standalone, draft}
---

```{r setup, message = F, echo = F}
require(rCharts)
options(RCHART_WIDTH = 800, RCHART_HEIGHT = 500)
knitr::opts_chunk$set(comment = NA, results = 'asis', tidy = F, message = F)
```


## NVD3 Scatterplot

```{r echo = F}
data(mtcars)
n1 <- nPlot(mpg ~ wt, group = 'gear', data = mtcars, type = 'scatterChart')
n1$print('chart1')
```

But ended up with this error:

Error in file(con, "r") : cannot open the connection
In addition: Warning message:
In file(con, "r") :
  cannot open file 'libraries/widgets/nvd3/nvd3.html': No such file or directory

After which I decided to copy the nvd3 folder from Ramnath's widgets directly into mine, hoping that this would solve the matter. However, this ended up crazily showing Ramnath's git page as well as my slides in the background!

What to do? I would really appreciate any guidelines/pointers/advice on how to accomplish this task. And, I hope this question aids other novices like myself in using the wonderful rCharts.

Note: I am using the standard editor for R, not R-studio. I feel the former is less cluttered.

Waterline

I assume this is in an R chunk. Have you tried the chunk option results='asis'? – Engaging

Thank you for your comment. No, I haven't. But the unfortunate thing is I don't even know how to try results="asis". What I'm doing is that I'm generating r1, and then simply pasting the code block that generated r1 into my slides using slidify. My assumption was that plots from rCharts can be included into slides in the same manner as static plots from, say ggplot2. This was my first attempt, the second being that I simply paste the script for r1 into my slide... I'm a complete noob, sorry. – Waterline

Edit applied following the helpful comment. – Waterline

Two more things. Try installing slidifyLibraries (library(devtools);install_github("slidifyLibraries", "ramnathv")). Then run slidify on your Rmd file (slidify("myrmdfile.Rmd")). – Engaging

Thanks again. Done. Actually, to be on the safe side, I installed the latest slidify + libraries using install_github("slidify","ramnathv", ref="dev"). Now, I can see the script underneath the chart being displayed in its raw form. – Waterline

Does that solve all your problems? Shall I write it up as an answer? – Engaging

Pardon me, I did not convey myself properly. The issue is there still: unable to generate an rChart in slides. What happens now is that I can see the script for the rChart (which isn't what I want). So I'm still trying to make some actual plots. – Waterline

Answer 1

All instructions below assume that you have the dev branch of the packages installed (slidify, slidifyLibraries and rCharts). You can accomplish this using install_github.

pkgs <- c("slidify", "slidifyLibraries", "rCharts")
devtools::install_github(pkgs, "ramnathv", ref = "dev")

There are two ways to include an rCharts viz in your slidify document, and the deck below illustrates both ways. If you print a plot in a code chunk, as you would do so in the R console, slidify automatically detects that you are running it in a knitr session and as a result save the resulting html to an iframe and embed it in the deck. Alternately, you can specify the chart inline, in which case you have to use n1$show("inline") and also include ext_widgets: {rCharts: libraries/nvd3} in your YAML front matter.

The iframe method is the default and the recommended method to avoid conflicts between various javascript files and css. The inline method does work well for several rCharts libraries, but make sure to check before you use.

---
title       : rCharts Integration
ext_widgets : {rCharts: libraries/nvd3}
mode: selfcontained
---

## NVD3 Plot Inline

```{r nvd3plot, results = 'asis', comment = NA, message = F, echo = F}
require(rCharts)
n1 <- nPlot(mpg ~ wt, data = mtcars, type = 'scatterChart')
n1$show('inline')
```

---

## NVD3 Plot Iframe

```{r nvd3plot2, results = 'asis', comment = NA, message = F, echo = F} 
require(rCharts)
n1 <- nPlot(mpg ~ wt, data = mtcars, type = 'scatterChart')
n1
```

Eliaeliades

Thank you, Professor. That solved the problem. Just to debug so that I can familiarise myself with slidify, I think it was due to the missing nvd3 widget, was it not? I had included widgets: [nvd3] but still had an empty nvd3 folder in widgets. It is only after changing the syntax to yours do I see the nvd3 populated. Is this the reason for the modified ext_widgets: {rCharts: libraries/nvd3} ? – Waterline

You are absolutely right. I modified the syntax for external widgets to avoid duplication of libraries. Earlier, I had to copy all rCharts libraries to slidifyLibraries so that they could be used as widgets. But this meant keeping them in sync, and also duplication. The ext_widgets allows widgets to be used from any package. – Eliaeliades

Great! And just one final question, after which I will copy your responses to my question on GIT too for the benefit of other users: If we need to import multiple widgets, how should we specify this in our code? – Waterline

You can specify it like this ext_widgets: {rCharts: [libraries/nvd3, libraries/leaflet]}. For regular widgets, you can specify it as widgets: [widget1, widget2, widget3]`. Essentially it is a YAML array. – Eliaeliades