0

I want to display a Plotly plot with HTML without using a render function I have looked into htmltools and htmlwidgets but have not found a solution. I am able to render a Plotly plot without a render function with the insertUI function like this:

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
    
    #shiny::singleton(
    #    tags$head(tags$script(src = "custom_message_handler.js"))
    #),

    div(
        id = "placeholder"
    )

)

# Define server logic required to draw a histogram
server <- function(input, output) {

    shiny::insertUI(
        "#placeholder",
        "beforeBegin",
        ui = shiny::tagList(plotly::plot_ly(x = rnorm(100), y = rnorm(100)))
    )
    
    #shiny::observe({
        
     #   panel_plot(
      #      item = shiny::tagList(plotly::plot_ly(x = rnorm(100), y = rnorm(100)))
        #)
        
    #})
}

# Run the application
shinyApp(ui = ui, server = server)

However, when I have my own custom message handler, then the Plotly plot will not render. I want to send the Plotly plot to Javascript where I want to insert the Plotly plot after the placeholder id. How can I send the output of the Plotly plot to JavaScript and then display it like the insertUI function does?

This is how I got so far regarding my own custom message handler

panel_plot <- function(item, session = shiny::getDefaultReactiveDomain()) {
    session$sendCustomMessage(
        type = 'plots',
        message = list(panel = as.character(item))
    )
}

# Javascript/jQuery
$(function() {
  Shiny.addCustomMessageHandler('plots', function(message) {

    var panel_plot = $.parseHTML(message.panel);
    $(panel_plot).insertAfter($('#placeholder'));

  });
});

shiny::observe({
panel_plot(
            item = shiny::tagList(plotly::plot_ly(x = rnorm(100), y = rnorm(100)))
        )
})
ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
Pascal Schmidt
  • 223
  • 2
  • 12
  • What you are trying to achive in the end? – ismirsehregal Mar 01 '21 at 08:39
  • The same behaviour as the insertUI function where the Plotly plot gets displayed. So sending the Plotly plot to JavaScript which inserts the plots in the ui with self defined custom message handler. – Pascal Schmidt Mar 01 '21 at 18:26
  • Sure, but what is the use case / expected advantage of using a cusom message handler? – ismirsehregal Mar 01 '21 at 22:10
  • I would be manipulating the DOM based on other things I am sending and to not call the server to often to delete and add ui I thought I'll be sending it in one observer and do the necessary UI parts in JavaScript. So just for efficiency reasons was my first thought. – Pascal Schmidt Mar 02 '21 at 04:26
  • Are you aware of plotly's [plotlyProxy](https://plotly-r.com/linking-views-with-shiny.html#proxies) function, which let's you [modify existing plotly objects](https://plotly.com/javascript/plotlyjs-function-reference/) without re-rendering (using the same methods as plotly's [buttons](https://plotly.com/r/custom-buttons/) and [dropdown menus](https://plotly.com/r/dropdowns/))? – ismirsehregal Mar 02 '21 at 07:39

0 Answers0