Geek Answers Handbook

Use bsModal in shinyBS with fancy R plotly_click to create a new storyline in a popup

Here is my code for a basic brilliant application that uses the plotly_click event to optionally display a different plot. I would like this sidebar graph to appear in a modal popup, rather than the side of the page.

 library(shiny) library(plotly) df1 <- data.frame(x = 1:10, y = 1:10) df2 <- data.frame(x = c(rep('a', 10), rep('b', 10)), y = c(rnorm(10), rnorm(10, 3, 1))) ui <- fluidPage( column(6, plotlyOutput('scatter')), column(6, plotlyOutput('box')) ) server <- function(input, output) { output$scatter <- renderPlotly({ plot_ly(df1, x = x, y = y, mode = 'markers', source = 'scatter') }) output$box <- renderPlotly({ eventdata <- event_data('plotly_click', source = 'scatter') validate(need(!is.null(eventdata), 'Hover over the scatter plot to populate this boxplot')) plot_ly(df2, x = x, y = y, type = 'box') }) } shinyApp(ui = ui, server = server)

I was able to complete this question ( Shiny: display the results in a popup ) and answer and tried to use it with trigger of plotly_click unsuccessfully. Any idea on how to pull out the same with a plot click?

UPDATE: I can clearly see that the graph plotly can be displayed in shinyBS modal popup, as shown in this code.

 df1 <- data.frame(x = 1:10, y = 1:10) ui <- fluidPage( actionButton('go', 'Click Go'), bsModal('plotlyPlot', 'Here is a Plot', 'go', plotlyOutput('scatter1')) ) server <- function(input, output) { output$scatter1 <- renderPlotly({ plot_ly(df2, x = x, y = y, mode = 'markers', source = 'scatter1') }) } shinyApp(ui = ui, server = server)

Instead of an actionButton as a trigger, I want to plotly_click or plotly_hover , as it is, a trigger (in the original example).

+2
r shiny plotly shinybs
source share
2 answers

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 "Chart" field in bsModal (Header and trigger is empty):

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

UPDATE: with the Shally-build-in Modal functionality (starting from Shiny 0.14), only adding a server is required:

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

CSS usage

You can use the HTML builder to contain graphics and use the 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 graphical embedded-API to set the visibility of your side window.

shinyBS

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

Pass the next argument to fluidPage

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

This will create a graph using wraper Popover . I have not tested it yet. In case of an 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 the shinyBS source file and the popover (options) of the bootstrap function for more information.

+2
source share

More articles:


All Articles