rCharts Highcharts Add extra data to tooltip

Question

I have a dataframe with 4 columns. I use two columns (x,y) to plot for x and y. Third column (group) is used for grouping. And my fourth column (cat) is not used, but I would like it to be displayed in the tooltip.

Here is my dataframe.

library(rCharts)
df <- data.frame(x=c(1:12,1:12),
                 y=c(0.6, 0.5, 0.3, 0.3, 0.8, 0.99, 0.6, 0.5, 0.4, 0.7, 0.6, 0.8,
                         0.4, 0.5, 0.7, 0.7, 0.2, 0.01, 0.4, 0.5, 0.6, 0.3, 0.4, 0.2),
                 group=c(rep("group1",12),rep("group2",12)))

df$cat <- c(rep(c(rep("A",6),rep("B",6)),2))

I use hPlotfunction from rChartsto create the highcharts bar column plot.

p <- hPlot(x = "x", y = "y", data = df, type = c("column"),group="group")
p$addParams(dom = "plot1")
p$tooltip(borderWidth=0,
           headerFormat="<span style='font-size: 10px'><b>{point.key}</b></span><br/>",
           followPointer=TRUE,
           followTouchMove=TRUE,
           shared = FALSE)

Here, it explains to add the extra data to the series. Seems straight forward but I havn't been able to get it to work. I have tried all sorts of things using toJSON from jsonlite and toJSONArray from RJSONIO. But, it refuses to work. That is the first part of the problem.

The second part is to actually display the tooltip once the data is in, using formatter. The highcharts reference suggests:

    tooltip: {
        formatter: function () {
            return 'The value for <b>' + this.x +
                '</b> is <b>' + this.y + '</b>';
        }
    }

How does one do this in R?

#idea1. maybe like this?
p$tooltip(formatter=function () {
  return 'The value for <b>' + this.x +
    '</b> is <b>' + this.y + '</b>';
})

#idea2. or like this?
p$tooltip(formatter="function () {
  return 'The value for <b>' + this.x +
    '</b> is <b>' + this.y + '</b>';
}")

#idea3. or perhaps like this?
p$tooltip(formatter=function () {
  "return 'The value for <b>' + this.x +
    '</b> is <b>' + this.y + '</b>';"
})

Anyway, none of them work. So, if anyone has any insights, I would like to know. Thanks a lot.

PS: The same question was posted by someone else before, but doesn't have a complete answer.

Answer 1

,Hi you have to put your formatter function between "#!...!#" like this :

p$tooltip(formatter="#!function () {
  return 'The value for <b>' + this.x +
    '</b> is <b>' + this.y + '</b>';
}!#")

@Ramnath probably answered a similar question somewhere.

Answer 2

So, it turns out that hPlot() cannot be used to show additional variables in tooltips. See working example below:

library(rCharts)

d <- data.frame(x=c(1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10),
                y=c(0.7,0.8,0.7,0.3,0.5,0.2,0.4,0.4,0.5,0.5,
                    0.3,0.2,0.3,0.7,0.5,0.8,0.6,0.6,0.5,0.7),
                type=factor(c("A","A","A","A","A","A","A","A","A","A","B","B","B","B","B","B","B","B","B","B")),
                pop=c("Group 1","Group 1","Group 1","Group 1","Group 1","Group 1","Group 2","Group 2","Group 2","Group 2",
                      "Group 1","Group 1","Group 1","Group 1","Group 1","Group 1","Group 2","Group 2","Group 2","Group 2"))

hp <- hPlot(x = "x", y = "y", data = d, type = c("column"), group = "type")
hp$plotOptions(column = list(stacking = "normal", pointPadding = 0, groupPadding = 0, borderWidth = 0))
hp$tooltip(borderWidth=0, followPointer=TRUE, followTouchMove=TRUE, shared = FALSE,
          formatter = "#! function(){return this.point.x + '<br>' + this.point.pop + '<br>' + this.point.type + ': ' + this.point.y;} !#")
hp

In the above example using hPlot(), the additional variable type cannot be shown in tooltip because the array is not named.

In the example below using the same data, rather than using hPlot(), the plot is built up manually. Here the tooltips work because the array is named. The line starting hm$series.... has names=T.

hm <- rCharts:::Highcharts$new()
dlev <- levels(d$type)
for(i in 1:length(dlev))
{
  hm$series(data = toJSONArray2(d[d$type==dlev[i],,drop=F], json = F,names=T), name = dlev[i],type = c("column"), marker = list(radius = 3))
}
hm$plotOptions(column = list(stacking = "normal", pointPadding = 0, groupPadding = 0, borderWidth = 0))
hm$tooltip(borderWidth=0, followPointer=TRUE, followTouchMove=TRUE, shared = FALSE,
          formatter = "#! function(){return this.point.x + '<br>' + this.point.pop + '<br>'+ this.point.type + ': ' + this.point.y;} !#")
hm