rCharts aspires to be a meta-framework, that allows users to plug in arbitrary javascript visualization libraries with minimal effort. The main advantage of integrating with rCharts is the standardized plotting interface and accompanying support functions that allow charts to be published as standalone charts or as a part of an interactive document or web application.
Recently, I came to know about echarts, an interesting visualization library with an extensive set of features built by Lin Feng at baidu. Now, the documentation of echarts is in Chinese, but fortunately Google Translate does a pretty good job of translating it into English.
I thought it would be interesting for me to share with you, how I went about the task of integrating echarts.
The first step is to understand the structure of the html based on an example. I found an excellent example as seen here. As discussed in my post, I went about creating a folder structure for echarts.
echarts config.yml js echarts-map.js echarts.js esl.js layouts chart.html
I copied the example code to chart.html and stripped the layout off all the data, which will be provided by R.
One of the main reasons it is hard working with different javascript visualization libraries is because they all seem to choose different data structures for the chart payload. Standardizing some aspects of the data structure can go a long way in providing a unified interface for chart specification.
Since rCharts already has a standardized interface for specifying a chart, we need to translate it to the data structure used by echarts. Shown below is a simple ePlot
function that does the grunt work in translating the data, and creating a simple chart.
ePlot <- function(x, y, data, group, type, colors, ...){ require(rCharts); require(plyr) if (!missing(group)){ series = setNames(dlply(data, group, function(d){ list( name = d[[group]][1], type = type, data = d[[y]], ... ) }), NULL) } xAxis = list( type = 'category', data = unique(data[[x]]) ) legend = list( data = unique(data[[group]]) ) if (!missing(colors)){ series = lapply(seq_along(series), function(i){ series[[i]]$itemStyle = list(normal = list(color = colors[i])) return(series[[i]]) }) } r1 <- rCharts$new() r1$setLib('echarts') r1$set(series = series, xAxis = xAxis, legend = legend) r1 }
Now that we have a plotting function in place, we can experiment with creating different types of charts. In order to run this code, you will need to download this repository and navigate to the echarts
folder so that the setLib
method in ePlot
points to the correct location of the library files.
Let us start with a simple line chart, using the USPersonalExpenditure
dataset.
library(reshape2); library(knitr); library(rCharts) options(RCHART_WIDTH = 575, RCHART_HEIGHT = 400) usp <- setNames(melt(USPersonalExpenditure), c('category', 'year', 'exp')) r1 <- ePlot('year', 'exp', data = usp, group = 'category', type = 'line') r1$save('line_chart.html', static = F)
We can draw an area chart by passing some extra arguments to the line chart plot.
r2 <- ePlot('year', 'exp', data = usp, group = 'category', type = 'line', smooth = TRUE, itemStyle = list(normal = list(areaStyle = list(type = 'default'))) ) r2$save('area_chart.html', static = F)
Let us now draw a bar chart. We will turn on some cool features in echarts using the set
method.
hair_eye_male = subset(as.data.frame(HairEyeColor), Sex == "Male") r3 <- ePlot('Hair', 'Freq', data = hair_eye_male, group = 'Eye', type = 'bar', colors = c('brown', 'blue', 'yellow', 'green')) r3$set(tooltip = list(trigger = 'axis')) r3$set(toolbox = list( show = TRUE, feature = list( mark = TRUE, saveAsImage = TRUE )) ) r3$save('bar_chart.html', static = F)
We can draw a candlestick chart using echarts
. Let us first fetch the data required using the quantmod
package
library(quantmod) getSymbols("GS") x = candleChart(GS,multi.col=TRUE,theme='white', plot = F) data_ = as.matrix(x@xdata)
We can now draw a candlestick chart
require(rCharts) r1 <- rCharts$new() r1$setLib('echarts') r1$set(series = list(list( name = 'GS', data = toJSONArray2(data_[,1:4], names = F, json = F), type = 'k' ))) r1$set(xAxis = list(list( type = 'category', data = gsub("-", "/", rownames(data_)) ))) r1$set(yAxis = list(list( type = 'value', scale = TRUE ))) r1$set(tooltip = list( trigger = 'axis' )) r1$set(dataZoom = list( show = TRUE, realtime = TRUE, start = 0, end = 50 )) r1 r1$save('candlestick_chart.html', static = F)
echarts supports a really extensive feature set and needs further exploration. There are some differences in the data structure for some charts, and that would mean writing more transformation functions to ensure that the end-user does not require to be aware of these idiosyncracies.
I would like to thank Lin Feng for creating a brilliant visualization library. I would also like to acknowledge Taiyun and his implementation of echarts.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.