How to set the 'generateTooltip' option for TreeMap charts?

[gdeflaux]

Hi,

The 'generateTooltip' option expects a Javascript function. Doing the following doesn't work because the argument is considered as a string, not a function object when the chart is loaded (I include a javascript file with the definition of the function).

options <- list(showScale = T, generateTooltip = "showStaticTooltip")

Any idea how to solve this problem?

Thanks,

Guillaume

[jas1]

amazing library, but got some problems with same issue here, wanting to add a custom tooltip.

im adding some data that might help solving the issue for future people with same issue:

looked at this lib documentation, found: gvisTreeMap https://cran.r-project.org/web/packages/googleVis/googleVis.pdf

then looked up the google vis docs: https://developers.google.com/chart/interactive/docs/gallery/treemap

the specific example of: generateTooltip: showStaticTooltip

happened the same issue as Guillaume said.

then lookin gfurther found something similar at timeline with a possible solution. http://stackoverflow.com/questions/32059308/custom-tooltips-for-gvistimeline-in-the-r-package-googlevis

when trying to replicate to the treemap element the check function is different from the other, then got stuck at tuning the custom file calls. the modifications added are followed as as suggested in stackoverflow

@ custom gvis_orig.R : no modifications

@ in gvisTreeMap_mod_for_tooltips.R :

# added tooltip param
gvisTreeMap <- function(data, idvar="", parentvar="", sizevar="", colorvar="",options=list(), chartid,tooltip=""){

  my.type <- "TreeMap"
  dataName <- deparse(substitute(data))

# added tooltip param to data
  my.options <- list(gvis=modifyList(list(width = 600, height=500),options), 
             dataName=dataName, 
                     data=list(idvar=idvar, parentvar=parentvar, sizevar=sizevar,colorvar=colorvar,
                               allowed=c("number", "string"),
                               tooltip=tooltip)
                     )

  # added tooltip param to check data
  checked.data <- gvisCheckTreeMapData(data, my.options,tooltip=tooltip)

  output <- gvisChart(type=my.type, checked.data=checked.data, options=my.options, chartid)

  return(output)
}

# added tooltip param 
gvisCheckTreeMapData <- function(data, options,tooltip=""){

# added tooltip param to data structure
  data.structure <- list(
                 idvar     = list(mode="required",FUN=check.char),
                 parentvar = list(mode="required",FUN=check.char),
                 sizevar   = list(mode="required",FUN=check.num.pos),
                 colorvar  = list(mode="required",FUN=check.num),
                 tooltip  = list(mode="required",FUN=check.char))
  x <- gvisCheckData(data=data,options=options,data.structure=data.structure)

  parent.match.id <- x[[2]][!(x[[2]] %in% x[[1]])]
  if (sum(is.na(parent.match.id))!=1 || length(parent.match.id)!=1){
     stop("parentvar and idvar do not fit together.")
  }
  x  <- data.frame(x)
}

unluckyly couldn't solve the thing, i'm quite new to R.

got stuck on the gvisCheckData , on vars.pos <- match(unlist(options$data[vars.req], use.names=FALSE), varNames) that added the tooltip column filled with NA ... and did not worked .

well ... hope it helps someone to reach the solution.

[jellegrammens]

anybody who found the solution for this?

[jas1]

hi , jellegrammens , no i didn't reach it but for getting working a specific javascript library i gone deeper and directly coded in html+js+css and interacted via shiny; learning how to use this its helpfull as you can use whatever js existent library; and use R to proces & manage the data , then serve it to shiny. the thing to learn how to do is the html js , shiny interaction.

Ended doing that because several html widgets got the basic function only and they lacked of more tuned functionalities. so you might want to try the example of google code as just plain JS then tune it like described in the following lines to interact in shiny.

the estructure will be:

1. --shinny app folder-- / server.r : the shiny server side > handle calls & do R magic
2. --shinny app folder-- / www / index.html : the HTML structure code of what you want to show
3. --shinny app folder> / www / js / yourCustom.js : custom code in case you dont want to put it in the HTML
4. --shinny app folder-- / www / js / <otherJsLibs> : other JS custom libs that youll be using
5. --shinny app folder-- / www / css / yourCustom.css : your custom css clases
6. --shinny app folder-- / www / css / : other css dependencies

For an easy example will be just a hello world, ( button triggers shiny call , R responds hello world ) but the key is in the exchange of data that youll read on the API doc of the JS library you want to use.

interaction its in the way:

1. play the shiny app ( recommend to navigate in browser for easier debugging )
2. press button defined in HTML > triggers JS event that calls shiny custom message ( declared on yourCustom.js )
3. server.R > handles the call done by the button and return some message ( this case hello world, but it can be a json string )
4. in yourCustom.js > handle the shiny response and do something ( ex: print console, or populate a js library json interface )
5. debug till it works :p
6. be happy :D

( lost the URL where it was explained with graphics :/ so here is som sample code: HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/shiny.js" type="text/javascript"></script>
  <script src="js/yourCustom.js" type="text/javascript"></script>

 </head>
 <body>
 <button id='myCustomButton'>hi button</button>
 <div id='customMessageOutput'></div>
 </body>
 </html>

yourCustom.js

$(document).ready(function() {
  // define click action  : mentioned in step 2
   $("#myCustomButton").on("click",function(evmsg) {customButtonAction();});

  // handler to receive data from server : mentioned in step 4
  Shiny.addCustomMessageHandler("customClickHandler", function(customMessageRecived) {
    // reset the output message div
    $("#customMessageOutput").html("");
    // add the new customMessage recived
    $("#customMessageOutput").html("<h1>"+ customMessageRecived +"</h1>");
  });

}
function customButtonAction(){
// this is what will be sent to the shiny side
   var customMessageSent = "hi this is custom input to message";
// this sends 
   Shiny.onInputChange("customInputName", customMessageSent );
}

server.r

# Define server logic 
shinyServer(function(input, output,session) {

    # observer: will observe changes on the input: customInputName
    observe({
        input$customInputName
        # this will put the value of the input on the custom message
        customMessage <- input$customInputName
        # this will send the custom message to the customClickHandler
        session$sendCustomMessage(type='customClickHandler', customMessage) 
    })
})

this pages should help:

• https://developers.google.com/chart/interactive/docs/gallery/treemap
• https://github.com/rstudio/shiny-examples
• http://shiny.rstudio.com/articles/building-inputs.html

Hope it helps !