This is a quick example of producing a multiple bar chart using rCharts package via implementing HighCharts library. The original tutorial can be found in rChart Gallery but some functions are outdated as can be checked here - They are updated here.

Firstly rCharts package needs to be installed from the GitHub repo if not installed.

install_github('rCharts', 'ramnathv')

The library is loaded.


The data is shown below.

# Prepare data
x <- data.frame(USPersonalExpenditure)
colnames(x) <- substr(colnames(x), 2, 5)
  1940 1945 1950 1955 1960
Food and Tobacco 22.200 44.500 59.60 73.2 86.80
Household Operation 10.500 15.500 29.00 36.5 46.20
Medical and Health 3.530 5.760 9.71 14.0 21.10
Personal Care 1.040 1.980 2.45 3.4 5.40
Private Education 0.341 0.974 1.80 2.6 3.64

The chart can be created as following. Note that the modified part is commented.

# Create chart
a <- rCharts:::Highcharts$new() # modified
a$chart(type = "column")
a$title(text = "US Personal Expenditure")
a$xAxis(categories = rownames(x))
a$yAxis(title = list(text = "Billions of dollars"))

Finally it is printed. Note that the results option should be set to be 'asis'.

# Print chart
a$print('chart 1', include_assets = TRUE) # modified

Note: rCharts package is quite convenient but the chart didn’t show when I pushed it into the blog repo. This was because

  • the auto-generated script tags were not parsed properly by Jekyll as they were included in a paragraph tag (<p></p>)
  • the paths were set according to the local paths which cannot be referenced in the remote repo as shown below.
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="c1"># Print chart</span><span class="w">
</span><span class="n">a</span><span class="o">$</span><span class="n">print</span><span class="p">(</span><span class="s1">'chart 1'</span><span class="p">,</span><span class="w"> </span><span class="n">include_assets</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w"> </span><span class="c1"># modified</span></code></pre></figure>

## script tags generated by rCharts cannot be referenced correctly as the paths are set according to the local machine as shown below.
<script type='text/javascript' src=/home/jaehyeon/R/x86_64-redhat-linux-gnu-library/3.1/rCharts/libraries/highcharts/js/jquery-1.9.1.min.js></script>
<script type='text/javascript' src=/home/jaehyeon/R/x86_64-redhat-linux-gnu-library/3.1/rCharts/libraries/highcharts/js/highcharts.js></script>
<script type='text/javascript' src=/home/jaehyeon/R/x86_64-redhat-linux-gnu-library/3.1/rCharts/libraries/highcharts/js/highcharts-more.js></script>
<script type='text/javascript' src=/home/jaehyeon/R/x86_64-redhat-linux-gnu-library/3.1/rCharts/libraries/highcharts/js/exporting.js></script>

In order to tackle down this issue, the following steps were followed.

  • Download all javascript libraries and save it into /assets/src/ - jQuery and highCharts-related libraries were downloaded from their CDNs.
  • Convert the Rmd file into a md file.
  • Update YAML and add liquid logic in the md file - see here for further details
  • Commit and push

The upated YAML is shown below.

layout: post
title: "2015-01-08-Embed-Custom-Javascript-Library"
description: ""
category: R
tags: [rCharts, knitr]
## customJS is added ##
- jquery-1.9.1.min
- highcharts
- highcharts-more
- exporting

And the liquid logic used is as following. Note that the quotation marks that wrap % should be stripped out. They are kept as the code is either executed or not apppear correctly together.

{'%' if page.customJS '%'}
  {'%' for file in page.customJS '%'}
    <script src='/assets/src/.js' type="text/javascript"></script>
  {'%' endfor '%'}
{'%' endif '%'}