Plotly bar chart shows NA at start (few seconds)

[nasim]

Hi,

My app has three drop-down filters with a plotly bar chart. The values reflected in Plotly bar chart will be changed based on the drop-down selections.

I deployed the app to shinyapps.io. The problem is that at the very beginning (for few seconds) the plotly is shown as below:

I used req in my reactive value. I also have withspinner in my UI. Does anyone know how to fix this?

Thanks

[cpsievert]

Do you have a link to your app on shinyapps.io? Is the behavior on shinyapps.io different from when you run it locally? Any chance you can share your code (or, better yet, a reprex)?

[nasim]

Sorry the app is private for now. The code is very complicated but here is the partial code that belongs to this plotly chart. The behavior is similar to my local machine. Req lines were originally put in my reactive and now I put them under renderplotly but still have the same issue. As you can see, I check for null input multiple times on top of req to prevent this issue but didn't work.

data_plot <- reactive ({
  
  data[data$variable1==input$selection1, ] %>% 
    filter(selection2_NAME %in% input$selection2) %>% 
    select(column1, column2,column3,column4)
  
})



output$plot <- renderPlotly ({
  req(input$selection1)
  req(input$selection2)
  req(input$selection3)
  
  
  if (is.null(data_plot()))
  {
    return(NULL)
  }
  
  else if ((is.null(input$selection1)) | (is.null(input$selection2)) | (is.null(input$selection3))) {
    return(NULL)
  }
  
  
  else if(input$selection1 == "A") {
    
    plot_ly (x = data_plot()$column3,
             y = ~ reorder(data_plot()$column1, data_plot()$column3),
             type = 'bar') %>% 
      layout(title = '', titlefont = list(
        family = "Myriad-Pro",
        size = 16),
        orientation = 'h',
        xaxis = list(title = "",tickformat = "%",zeroline=FALSE,fixedrange=TRUE),
        yaxis = list(title = "",fixedrange=TRUE),
        margin = list(l = 220, pad=7)) %>% 
      add_annotations(xref = 'x', yref = 'y',
                      x =data_plot()$column3 , 
                      y = reorder(data_plot()$column1, data_plot()$column3),
                      text = paste0(round(data_plot()$column3*100, 0), '%'),
                      showarrow = FALSE,xanchor = 'left',xshift = 3,opacity = 0.7) %>% 
      config(displayModeBar = F)
  }else if (input$selection1 == "B"){
    
    plot_ly (x = data_plot()$column4 ,
             y = ~ reorder(data_plot()$column1, data_plot()$column4),
             type = 'bar',
             color=~I(data_plot()$fillColor)) %>% 
      layout(title = '', titlefont = list(
        family = "Myriad-Pro",
        size = 16),
        orientation = 'h',
        xaxis = list(title = "",tickformat = "%",zeroline=FALSE,fixedrange=TRUE),
        yaxis = list(title = "",fixedrange=TRUE),
        margin = list(l = 220, pad=7)) %>% 
      add_annotations(xref = 'x', yref = 'y',
                      x =data_plot()$column4  , 
                      y = reorder(data_plot()$column1, data_plot()$column4 ),
                      text = paste0(round(data_plot()$column4 *100, 0), '%'),
                      showarrow = FALSE,xanchor = 'left',xshift = 3,opacity = 0.7) %>% 
      config(displayModeBar = F)
    
  } else {
    plot_ly (x = data_plot()$column2,
             y = ~ reorder(data_plot()$column1, data_plot()$column2),
             type = 'bar') %>% 
      layout(title = '', titlefont = list(
        family = "Myriad-Pro",
        size = 16),
        orientation = 'h',
        xaxis = list(title = "",tickformat = "%",zeroline=FALSE,fixedrange=TRUE),
        yaxis = list(title = "",fixedrange=TRUE),
        margin = list(l = 220, pad=7)) %>% 
      add_annotations(xref = 'x', yref = 'y',
                      x =data_plot()$column2, 
                      y = reorder(data_plot()$column1, data_plot()$column2),
                      text = paste0(round(data_plot()$column2*100, 0), '%'),
                      showarrow = FALSE,xanchor = 'left',xshift = 3,opacity = 0.7) %>% 
      config(displayModeBar = F)
    
  }
})

[cpsievert]

Hmm, hard to know for sure based on this code, but I have a feeling it's likely due to data_plot() returning something that you're not anticipating.

More specifically, based on this mapping in add_annotations():

text = paste0(round(data_plot()$column*100, 0), '%')

I'm guessing data_plot()$column is NULL or numeric(0), but you're probably expecting it to contain a real value.

Are you familiar with setting breakpoints in shiny apps? That should be quite useful in your case for inspecting the result of data_plot() before it gets sent to plot_ly()

[nasim]

The plot is changing based on the three selections and it shows correct result after the user is changing the drop down menus. It is just that for few seconds after the selected values, it shows empty plot and then it renders properly.

I was not familiar with setting breakpoints in shiny apps.

In general, you don't think that the problem is related to using req or checking for null. Am I right?