Use bsModal in the shinyBS package with plotly R plotly_click to generate new plot in pop up

Question

Here is my code for a basic shiny app using plotly_click event to optionally show another plot. I would like that side box plot to render in a modal pop up inst

Answer 1

Using CSS

You can use HTML builder to contain the plots and use stylesheet to add dynamic effects.

ui <- fluidPage(
  includeCSS(path_to_css_file),
  div( class='mainchart',
    column(6, plotlyOutput('scatter')),
    div(  class='popup',
        column(6, plotlyOutput('box'))
       )
    )
)

CSS

div.popup {
   display : none;
   position: absolute;
}
div.mainchart : focus > div.popup {
   display : block;
}
div.mainchart {
   position: relative;
}

Using Javascript

You can use the plotly embeded-API to set the visibility of your side box.

shinyBS

Since you want to stick to shinyBS, you can use the bsPopover function with a little trick. I assume you already know how to use bsModel which is similar to the example below.

Pass the following argument to fluidPage

bsTooltip(id, title, placement = "bottom", trigger = "click", content=column(6, plotlyOutput('box'))  )

This will create the plot with a Popover wraper. I didn't test it yet. In case of error, you can also try

options = list()
options$content = column(6, plotlyOutput('box'))
options$html = T # otherwise the conent will be converted to text
bsTooltip(id, title, placement = "bottom", trigger = "click",  options=options  )

Visit this source file of shinyBS and the popover(options) function of bootstrap for more info.

Answer 2

You can use toggleModal, just add this to your server:

observeEvent(event_data("plotly_click", source = "scatter"), {
 toggleModal(session, "boxPopUp", toggle = "toggle")
})

and put the box Plot in an bsModal (Title and trigger is empty):

ui <- fluidPage(
  column(6, plotlyOutput('scatter')),
  bsModal('boxPopUp', '', '', plotlyOutput('box'))
)

UPDATE: with shiny-build-in Modal functionality (since Shiny 0.14), only the server addition is needed:

 observeEvent(event_data("plotly_click", source = "scatter"), {
                showModal(modalDialog(
                        renderPlotly({
                                plot_ly(df2, x = ~x, y = ~y, type = 'box')
                        })
                ))
        })