Add Unique Links to all Data Points in Graph with rCharts

Question

I'm using rCharts to create a scatterplot that displays ratings that I have calculated over time. I have more information for each individual data point (rating) and would like to have each data point on the graph link to a unique page with more information about that specific data point.

For example: I would like to be able to hover over the first data point on the graph and click on it to go to a specific page (http://www.example.com/info?id=1) that provides more information about that rating or data point. Each data point has a unique id and unique url that I would like to link to.

Here is the code that I am using to generate the graph

library(rCharts)
age <- c(1:20)
tall <- seq(0.5, 1.90, length = 20)
name <- paste(letters[1:20], 1:20, sep = "")
df <- data.frame(age = age, tall = tall, name = name)
n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
n1$xAxis(axisLabel = "the age")
n1$yAxis(axisLabel = "the tall", width = 50)
n1$chart(tooltipContent = "#! function(key, x, y, e ){ 
  var d = e.series.values[e.pointIndex];
  return 'x: ' + x + '  y: ' + y + ' name: ' + d.name
} !#")
n1

Answer 1

This should definitely be considered a hack for now, but it works. Issues that we face here that cause us to require this hack are the draw function in the standard rCharts template does not offer us a place to add bits of code for nvd3, and the afterScript for nvd3 falls outside of our draw so is called before the chart is rendered. Also, the nvd3 tooltip is just html, but the problem with providing a link here to click is that mouseover is triggered and the tooltip disappears before we can click on it (fun trick but not useful). So, in this hack we will hijack the tooltip content function to also specify a click event function.

I tried to be clear with comments, but please let me know if none of this makes sense. I certainly do not make a career out of support :), so I have not built up that skill set.

  library(rCharts)

  age <- c(1:20)
  tall <- seq(0.5, 1.90, length = 20)
  name <- paste(letters[1:20], 1:20, sep = "")

  #this next line is not entirely necessary if other data
  #provides the part of the link address
  #will also comment in the js piece below to show
  #how to handle that
  links <- paste0("http://example.com/",name)

  df <- data.frame(age = age, tall = tall, name = name, links = links)
  n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
  n1$xAxis(axisLabel = "the age")
  n1$yAxis(axisLabel = "the tall", width = 50)
  n1$chart(tooltipContent = "#! function(key, x, y, e ){ 
    d3.selectAll('[class*=\"nv-path\"]').on('click',function(){
      //uncomment debugger if you want to see what you have
      //debugger;
      window.open(d3.select(this).datum().data['point'][4].links,'_blank');
      //as stated in the r code generating this
      //the link address might be in the data that we already have
      //window.open(
      //  'http://example.com/' + d3.select(this).datum().data['point'][4].name,
      //    '_blank'
      //);
    })
    //looks like the actual point is below the hover tooltip path
    //if tooltips disabled we could do click on the actual points
    //d3.selectAll('.nv-group circle').on('click',function(){
    //  debugger;
    //})
      var d = e.series.values[e.pointIndex];
      return 'x: ' + x + '  y: ' + y + ' name: ' + d.name
    } !#")

  n1

I hope it helps.