How to add images to the tooltip NVD3 in r

Question

I have a dataframe that I have managed to create a great chart from and I'm pretty pleased with the result.

However, I would like to add a specific image that is relevant to a point when the user hovers over it. As this is all done on one computer I imagine the file reference will be kept as part of the dataframe and then somehow the tooltip will read the file reference and then display an image preview. This is probably all in javascript but I'm not really sure how to do it or if this is the best method

Here is my dataframe (without filenames referencing images:

TTypedAll2<-structure(list(V1 = c(6L, 13L, 8L, 11L, 6L), TissueType = c("GC","Co","BE", "Tu", "Tu"), Sample = c("SL.Tum_TB05_00.fq.gz", "S.Tum_TB06.fq.gz", "S.Tum_T573.fq.gz", "Tum_TB0578.fq.gz", "TumTB0106.fq.gz"),Samplenum = 1:5), .Names = c("V1", "TissueType", "Sample", "Samplenum"), row.names = c("SL.Tum_TB05_00.fq.gz", "S.Tum_TB06.fq.gz", "S.Tum_T573.fq.gz", "Tum_TB0578.fq.gz", "TumTB0106.fq.gz"), class = "data.frame")

and the code for the plot:

TTypedAll2$Sample<-as.character(TTypedAll2$Sample)
TTypedAll2$Samplenum<-1:nrow(TTypedAll2)
d3chart<-nPlot(V1~Samplenum, group='TissueType',     data=TTypedAll2,type="scatterChart")

d3chart$chart(tooltipContent = "#! function(key, x, y, e){ 
  return '' + e.point.Sample
} !#")
d3chart

require(rCharts)
n1 <- nPlot(mpg ~ wt, group = 'gear', data = mtcars, type = 'scatterChart')
n1$chart(tooltipContent = "#! function(key, x, y){ 
         return 'x: ' + x + '  y: ' + y 
         } !#")

Update

I changed the code that was provided so that I added the full image path I am interested in to my dataframe and then tried this:

d3chart<-nPlot(V1~Samplenum, group='TissueType',  data=TTypedAll2,type="scatterChart")
d3chart$chart(tooltipContent = "#! function(item, x, y, e){ 
   return '' + e.point.Sample + '<img src=' + e.point.img + '>'
          } !#")
d3chart

No errors but all I get is a question mark instead of the image

Update

OK I think Im getting there but probably have a problem with double quotes. This is what I have so far but it doesnt display the image and I think its because the file path has to be in double quotes but I cant figure out how to do this

d3chart<-nPlot(V1~Samplenum, group='TissueType',     data=TTypedAll2,type="scatterChart")
d3chart$chart(tooltipContent = "#! function(item, x, y, e,z){ 
return '' + e.point.Sample + '<img src=file:///Users/cer.png' + '>'
          } !#")
d3chart

Answer 1

I'm not familiar with your R setup, this JavaScript code will change the tooltip to display an image:

    nv.addGraph(function() {
    var chart = nv.models.scatterChart();
    chart.xDomain( [ 0, 10 ] ).yDomain( [ 0, 10 ] );

    chart.tooltipContent(function(key, x, y, z, e) {
        return '<img class="style-your-image" src="' + e.point.img + '">';
    });

    var myData = [
        {
            key: 'Group 1',
            values: [
                { x: 3, y: 5, size: 5, shape: 'circle', img: '/static/img/img_1.jpg' }, // image on local server
                { x: 7, y: 5, size: 5, shape: 'circle', img: 'http://placehold.it/150x150' } // Web image
            ]
        }
    ]

    d3.select('#chart svg').datum(myData).call(chart);
    nv.utils.windowResize(chart.update);

    return chart;
  });