mjs_add_mouseover works in RStudio, but I cannot get it to work with shiny.

[jerrymcummings]

Rather than show custom text on points of a scatterplot in shiny, it appears to be showing default text. If I run that same core chunk of code directly from RStudio the plot shows up in the plot pane and the points all have the expected custom mouse-over text.

Thoughts?

library(shiny)
library(metricsgraphics)

server <- function(input, output) {
  output$distPlot <- renderMetricsgraphics({
    dat <- data.frame(value=rnorm(n=30, mean=5, sd=1),
                      value2=rnorm(n=30, mean=4, sd=1),
                      test = c(rep(c('test', 'test2'), 15)))

    dat %>%
      mjs_plot(x = value, y = value2) %>%
      mjs_point() %>%
      mjs_add_mouseover("function(d, i) {
                            $('{{ID}} svg .mg-active-datapoint')
                            .text('custom text : ' + d.point.test + ' ' + i);
                         }")
  })
}

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
    ),
    mainPanel(metricsgraphicsOutput("distPlot"))
  )
)

shinyApp(ui = ui, server = server)

System info:

R version 3.2.1 (2015-06-18)
Platform: i386-w64-mingw32/i386 (32-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] metricsgraphics_0.8.5 shiny_0.12.1         

loaded via a namespace (and not attached):
 [1] htmlwidgets_0.5 magrittr_1.5    R6_2.1.0        htmltools_0.2.6 tools_3.2.1    
 [6] yaml_2.1.13     Rcpp_0.12.0     jsonlite_0.9.16 digest_0.6.8    xtable_1.7-4   
[11] httpuv_1.3.2    mime_0.3       

RStudio 0.99.467 says packages are up to date.

[davidpham87]

Hi,

If you want to solve your problem change the '{{ID}}' string in your mousever function to '#distPlot' (that is the identifier in your shiny UI pages.

The string '{{ID}}' is not used by Shiny as you have to provide an identifer anyway :-)

[hrbrmstr]

thx for that (i don't use Shiny even on a weekly basis, so this was def lagging)

[jerrymcummings]

I had tried variations of

mjs_add_mouseover("function(d, i) { $('distPlot svg .mg-active-datapoint') .text('custom text : ' + d.point.test + ' ' + i); }")

earlier without success. Even with your clue, I'm still unable to see the "custom text" string appear. I guess I'll keeping around using that as the theme.

Thanks.

[davidpham87]

Try with that:

$('#distPlot svg .mg-active-datapoint')

(Sorry my answer was not totaly precise). The reason is the following. AFAIK:

1. $ is the jQuery identifier.
2. $(...) selects what is inside (...).
3. In order to understand what is selected, one has to understand CSS/Javascript identifiers/selectors:
   a) #my-id selects html tags with attribute id "my-id"
   b) .my-class selects html tags with attribute class "my-class"
   c) some-tags selects html tags whose name are some-tags

Better explainations are given by the slides of the creators of d3.js

[jerrymcummings]

That did the trick and I appreciate the explanation. Thank you.