Yi's Notes

⟨Data Scientist|Photographer⟩

0%

How to use rCharts - highcharts.js

Introduction

Package rCharts provides a quick access to interactive plots. It includes the following javascript packages:

  • Polycharts: rPlot
  • Morris: mPlot
  • NVD3: nPlot
  • xCharts: xPlot
  • Highcharts: hPlot
  • Rickshaw: Rickshaw$new()

Here is a list of existing javascript libraries for data visualization.

language Library Package R Library Python Technology Compatibilité Document Licence Type Graphs Commentaire
javascript D3.js None d3py svg IE9+, Chrome, Firefox, Safari, Opera Bien Documenté Open Source ALL
javascript HighCharts rCharts js.highcharts svg/vml IE6+, Chrome, Firefox, Safari, Opera Bien Documenté Commercial ALL Chart
javascript Raphaël None js.raphael svg/vml IE6+, Chrome, Firefox, Safari, Opera Bien Documenté Open Source ALL
javascript/flash Google Chart googleVis pygooglechart svg/vml IE6+, Chrome, Firefox, Safari, Opera Bien Documenté Open Source ALL Chart
D3.js dimple rCharts None svg IE9+, Chrome, Firefox, Safari, Opera Demo/Example/API Open Source ALL Chart
D3.js NVD3 rCharts python-nvd3 svg IE9+, Chrome, Firefox, Safari, Opera Demo/Example Open Source ALL Chart
Raphaël PolyCharts rCharts None svg/vml IE6+, Chrome, Firefox, Safari, Opera Editor/API Open Source (Licence required for external deployment) ALL Chart Spotfire Like/Neo4j
Raphaël Morris rCharts None svg/vml IE6+, Chrome, Firefox, Safari, Opera Demo/Example Open Source Non Rich
D3.js xCharts rCharts None svg IE9+, Chrome, Firefox, Safari, Opera Demo/Example/API Open Source Riche en Animation
D3.js RickShaw rCharts js.rickshaw svg IE9+, Chrome, Firefox, Safari, Opera Demo/Example Open Source Time Series/Stream
D3.js / Langage Vega rCharts Vincent svg IE9+, Chrome, Firefox, Safari, Opera Editor/Example/Document Open Source ALL ggplot2 Like
D3.js uvCharts rCharts None svg IE9+, Chrome, Firefox, Safari, Opera Demo/Example/API Open Source ALL Chart
javascript sigma.js rgexf Canvas/WebGL IE9+, Chrome, Firefox, Safari, Opera Demo/Example/API Open Source Network Gephi

A quick interactive graph

Use the corresponding quick graph creation code (see previous section: rPlot, hPlot, nPlot, xPlot, etc) to create a fast interactive graph with the formula-lattice-like graph grammar.

1
2
3
require(rCharts)
r1 <- rPlot(mpg ~ wt | am + vs, data = mtcars, type = "point", color = "gear")
r1

The following code provides a better binding in Knitr (see [reproducible reporting]):

1
2
3
require(rCharts)
r1 <- rPlot(mpg ~ wt | am + vs, data = mtcars, type = "point", color = "gear")
r1$show("inline", include_assets = T, cdn = T)

And with the following code permits the binding in shiny:

  • server.R
    • Always load package rCharts
    • Use shiny-ui function (rCharts personalized) renderChart({}) for generate graph
    • Must use addParams methode to add a parameter dom and give the name of outputid (i.e. the name when you use for ui-output function)
    • Remember to return the object rCharts by function return()
  • ui.R
    • use showOutput("outputid","package-name") to display the graph in the bootstrap grid
    • “package-name” should always be in lower case and correspond to the package function used in server.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
## server.r
require(rCharts)
shinyServer(function(input, output) {
output$myChart <- renderChart({
names(iris) = gsub("\\.", "", names(iris))
p1 <- rPlot(input$x, input$y, data = iris, color = "Species",
facet = "Species", type = 'point')
p1$addParams(dom = 'myChart')
return(p1)
})
})
## ui.R
require(rCharts)
shinyUI(pageWithSidebar(
headerPanel("rCharts: Interactive Charts from R using polychart.js"),
sidebarPanel(
selectInput(inputId = "x",
label = "Choose X",
choices = c('SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth'),
selected = "SepalLength"),
selectInput(inputId = "y",
label = "Choose Y",
choices = c('SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth'),
selected = "SepalWidth")
),
mainPanel(
showOutput("myChart", "polycharts")
)
))

More basic/advanced using example, you can visit [https://github.com/ramnathv/rCharts/tree/master/inst/libraries], and in each libraries you can find examples.R for detailed usage.

Advanced usage

You could find some advanced usages in examples.R file. Here, we explain how to create an object rcharts and generate a more personalized plots. The example libraries will be based on HighCharts.

Here is an example code from examples.R of HighCharts.

1
2
3
4
5
6
a <- rCharts::Highcharts$new()
a$chart(type = "column")
a$series(data = list(list(y = 15, drilldown = list(data = c(1, 2, 3))), list(y = 20,
drilldown = list(data = c(1, 2, 3)))), name = "test")
a$xAxis(categories = c("Brand A", "Brand B"))
a$plotOptions(column = list(cursor = "pointer", point = list(events = list(click = drill_function))))

As we can see:

  1. We first create a rCharts object of Highcharts which use the Highcharts template: a <- rCharts::Highcharts$new()
  2. Then we modify in the object in the list “chart”, the value of type equals to “column”: a$chart(type = "column")
  3. Create a data series by adding a list of sub-lists data to “series” of a.
  4. Modify xAxis labels by giving “Brand A” and “Brand B”
  5. The plotOptions is modified to adapt the requirement

If you are confused, that is normal. Here the very first step is to understand how a highcharts javascript works:

In the above we can see in “result” we have the same plot generated by the R code. Compare it!

  1. we see that a$chart(type = "column") is "chart": {"type": "column", "renderTo": "chart262c158f3b56"} (ignore “renderTo”, some parameters are set by defaut in the package for certain reasons: generate a working standalone page, shiny application support, etc.)
  2. a$series generates "series": [{"data": [{..., and for a detailed reference of which format of data is accepted in highcharts, we should reference to [http://api.highcharts.com/highcharts#series], and how to create them, we will see that later.
  3. a$xAxis(categories = c("Brand A", "Brand B")) this line generates "xAxis": [{"categories": [ "Brand A", "Brand B" ] }]
  4. for plotOptions as well

Why use highcharts as an example? The reason is quite simple: well documented API, a gallery of examples which you can see the javascript in the live and compare your code of javascript (generated by R to this api).