Tooltips with R and jQuery

January 3, 2013
By

(This article was first published on Omnia sunt Communia! » R-english, and kindly contributed to R-bloggers)

Tooltips appear frequently in webpages, usually associated with JavaScript code. There are several Javascript scripts and libraries to populate your webpage with tooltips. In this post I will show how to use gridSVG to enhance a graphic produced with R to show tooltips with the library jQuery and its plugin tooltipster.

EDIT: There is an updated version of the code below that use both qTip2 and tooltipster. The code is available at github. Visit the result with qTip2 and with tooltipster. Anyway, the procedure illustrated below is still valid.

The first step is to produce the graphic. We will use a custom panel function which assigns unique identifiers to each element.

panel.circles <- function(x, y, identifier,...){
    for (i in seq_along(x)){
    grid.circle(x[i], y[i], r=unit(5, 'mm'),
                default.units='native',
                ## Add the identifier
                name = paste('myPoint', identifier[i], sep='.'), 
                gp=gpar(fill='gray',...))
    }}
library(gridSVG)
library(lattice)

x <- rnorm(10)
y <- rnorm(10)
id <- seq_along(x)
df <- data.frame(x, y, id)

xyplot(y ~ x, data=df,
       panel=panel.circles,
       ## Identifier of each circle
       identifier=df$id)

The tooltipster plugin will use the content of the title attribute of each element to show the tooltip. Therefore we visit each circle to add content to the title attribute with grid.garnish.

for (i in 1:nrow(df)){
  idPoint <- df[i, "id"]
  ## Each circle is identified with myPoint.1, myPoint.2,etc.
  namePoint <- paste('myPoint', idPoint, sep='.')
  point <- signif(df[i, ], 2)
  ## Text to be included in the 'title' attribute
  info <- paste('x = ', point$x, 
                   '<br />y = ', point$y, 
                   '<br />ID = ', idPoint, sep='')
  imageURL <- 'http://developer.r-project.org/Logo/Rlogo-5.png'
  imageInfo <- paste("<img src=", imageURL, " width='50' />", sep='')
  tooltip <- paste(imageInfo, info, sep='<br />')
  grid.garnish(namePoint, title=tooltip)
}

Next step is to add JavaScript code to the graphic with the grid.script function. The jQuery library can be loaded with being downloaded. However, you need a local copy of the tooltipster plugin. Next code assumes that this local copy is located in a folder named js.

## jQuery
grid.script(file='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js')
## tooltipster (downloaded from http://calebjacob.com/tooltipster/)
grid.script(file='js/jquery.tooltipster.min.js')

An additional small JavaScript code is needed to join them all. It is a simple jQuery filter that triggers a tooltip when an object whose id begins with myPoint is hovered over. For details about fixedWidth, arrow and followMouse you should visit the tooltipster webpage.

$(document).ready(function() {
    $('[id^="myPoint"]').tooltipster({
        fixedWidth: 120,
        arrow: false,
        followMouse: true
    });
});

Save this code in a file named myTooltipLattice.js (for example) under the js/ folder. Then you can add it to the graphic with grid.script.

grid.script(file='js/myTooltipLattice.js')

Last step is to produce the SVG file and include it in a basic HTML page. If you wish you can change the title of this page and modify the tooltip CSS configuration using the tooltipster.css file (included in the tooltipster plugin).

gridToSVG('tooltipLattice.svg')

htmlBegin <- '<!DOCTYPE html>
  <html>
  <head>
  <title>Tooltips with jQuery and gridSVG</title>
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
  </head>
  <body>'

htmlEnd <- '</body>
  </html>'

svgText <- paste(readLines('tooltipLattice.svg'), collapse='\n')

writeLines(paste(htmlBegin, svgText, htmlEnd, sep='\n'),
             'tooltipLattice.html')

The result is available here.
tooltip


To leave a comment for the author, please follow the link and comment on his blog: Omnia sunt Communia! » R-english.

R-bloggers.com offers daily e-mail updates about R news and tutorials on topics such as: visualization (ggplot2, Boxplots, maps, animation), programming (RStudio, Sweave, LaTeX, SQL, Eclipse, git, hadoop, Web Scraping) statistics (regression, PCA, time series, trading) and more...



If you got this far, why not subscribe for updates from the site? Choose your flavor: e-mail, twitter, RSS, or facebook...

Comments are closed.