Highcharts Area Range Plot in rCharts

Question

does anyone know if it's possible to create a area range style plot in rCharts (http://www.highcharts.com/demo/arearange-line)?

My basic problem is the visualisation of a simple forecast scenario:

set.seed(123134)
y <- c(rnorm(20, 35, 2), rep(NA, 10))
data <- data.frame(y=y)
data$fc <- c(rep(NA, 20), rnorm(10, 35, 1))
data$lci <- data$fc-1
data$uci <- data$fc+1

h1 <- Highcharts$new()
h1$chart(type="line")
h1$series(data=data$y, marker = list(symbol = 'circle'), connectNulls = TRUE)
h1$series(data=data$fc, marker = list(symbol = 'circle'), connectNulls = TRUE)
h1$series(data=data$uci, showInLegend = FALSE, marker = list(symbol = 'square'), connectNulls = TRUE)
h1$series(data=data$lci, showInLegend = FALSE, marker = list(symbol = 'square'), connectNulls = TRUE)
h1$series(data=rep(30,30), marker= list(enabled = FALSE))
h1

Thanks!

Answer 1

Here is an example of an area range chart. I am adding the code below as well.

library(rCharts)
# year is converted to highcharts compatible datetime format
huron <- data.frame(
  year = as.numeric(as.POSIXct(paste0(1875:1972, '-01-01')))*1000, 
  level = as.vector(LakeHuron)
)

# add ymin and ymax to data
dat <- transform(huron,
  ymin = level - 1,
  ymax = level + 1
)

# initialize highcharts object
# add each layer as a series
h1 <- Highcharts$new()
h1$series(list(
  list(
    data = toJSONArray2(dat[,c('year', 'level')], names = F, json = F),
    zIndex = 1
  ),
  list(
    data = toJSONArray2(dat[,c('year', 'ymin', 'ymax')], names = F, json = F),
    type = 'arearange',
    fillOpacity = 0.3,
    lineWidth = 0,
    color = 'lightblue',
    zIndex = 0
  )
))
h1$xAxis(type = 'datetime')
h1

EDIT. A simpler way to input series is to use the series method and add the two data series separately. This avoids the nested list, which can get ugly.

h1 <- Highcharts$new()
h1$series(
  data = toJSONArray2(dat[,c('year', 'level')], names = F, json = F),
  zIndex = 1,
  name = "Level"
)
h1$series(
  data = toJSONArray2(dat[,c('year', 'ymin', 'ymax')], names = F, json = F),
  type = 'arearange',
  fillOpacity = 0.3,
  lineWidth = 0,
  color = 'lightblue',
  zIndex = 0
)
h1$xAxis(type = 'datetime')
h1

EDIT2: To add a range description as in the highcharts chart, you can add the following line of code. Note that the set method can be used to add any arbitrary key-value pair for a chart.

h1$set(tooltip = list(
  crosshairs =  T,
  shared = T,
  valueSuffix =  '°C'
))