rCharts with slidy

My last post I talked about using rCharts to create interactive graphics for my interview presentations. They seemed to go over pretty well in my interviews and helped me greatly as I did not need to remember or write down specific numbers to talk about. I use slidy to create my HTML slideshows and there was some interest from my last post to see exactly how I had these charts into a slidy html presentation.

First off, I did not use rCharts and knitr in tandem, but that would make the workflow a bit easier. The major thing you'd want to remember is to make sure to add the following chunk option: results = 'asis'. This will ensure that the raw html printed from rCharts will be included in the markdown file as is.

I personally just copy and pasted the javascript into my markdown presentation (instead of using knitr as talked about above). This was easier for me as I edited many specific options in the raw Javascript to come to my final version (and created a boxplot from scratch). It would be possible to make all the edits directly through the rCharts framework, but I found it easier to edit the raw Javascript by looking at the highcharts.js documentation to get the figure I was looking for.

For those who did not see my last post, here is the R code I used to create my graphic:


h1 <- hPlot(x = "GenSerCor", y = "percent", group = "FitSerCor", data = converge)
h1$yAxis(title = list(text = "Convergence Rate"), min = 0, max = 100, tickInterval = 10)
h1$xAxis(title = list(text = "Generated Serial Correlation Structure"),
         categories = c("Ind", "AR1", "MA1", "MA2", "ARMA"))
h1$legend(verticalAlign = "top", align = "right", layout = "vertical", title = list(text = "Fitted SC"))
h1$plotOptions(series = list(lineWidth = 4))
h1$print('chart1', include_assets = TRUE, cdn = TRUE)

After I ran this command in R, I edited the resulting Javascript code that was printed from the last line of the R code above. My final Javascript code can be seen below.


Once you have that in markdown format, you can turn it into a *slidy* html presentation with the following command in *pandoc*:

pandoc -s --mathjax -i -t slidy -o outfile.html ```

This gives you a file that looks something like this:

```html <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> Witty Title


That should give you a html presentation with an interactive Javascript based figure.

Tags:  R rCharts javascript html slidy

blog comments powered by Disqus