Plot re-rendering animation

[Alik-V]

Hi Victor,

I hope you have been well!

I want the plots to re-render when the user switches between the radio buttons in shiny. The plots animate just fine on first render, but if you keep switching between the options, the plots do not animate again. Is there a way to make them animate when flicking between the radio buttons?

library(apexcharter)
library(dplyr)
library(shiny)

ui <-
  fluidPage(
    radioButtons(
      "radio_output_type",
      label = "Select Complication:",
      choices = list("One", "Two"),
      selected = "One"
    ),
    uiOutput("ui_main_chart")
  )

server <- function(input, output, session) {
  df <- data.frame(
    time = c(2020, 2025, 2030, 2035, 2040),
    x = c(10.1, 20.3, 30.4, 40.7, 50.8),
    y = c(3.4, 6.7, 10.1, 13.6, 16.9),
    z = c(6.8, 13.6, 20.3, 27.1, 33.9)
  )

  output$ui_main_chart <- renderUI({
    if (input$radio_output_type == "One") {
      apexchartOutput("plot1", height = "550px")
    }
    else if (input$radio_output_type == "Two") {
      apexchartOutput("plot2", height = "550px")
    }
  })

  output$plot1 <- renderApexchart({
    aplot1 <- apexchart() %>%
      ax_chart(type = "bar") %>%
      ax_grid(show = FALSE) %>%
      ax_series(list(name = "x",
                     data = df$x),
                list(name = "y",
                     data = df$y),
                list(name = "z",
                     data = df$z)) %>%
      ax_xaxis(categories = df$time) %>%
      ax_yaxis(
        show = TRUE,
        labels = list(minWidth = 60),
        title = list(text = "Some text in millions units")
      ) %>%
      ax_title(text = "Output of plot 1")
    return(aplot1)
  })

  output$plot2 <- renderApexchart({
    df <- df %>% filter(time != 2020)
    aplot2 <- apexchart() %>%
      ax_chart(type = "bar") %>%
      ax_grid(show = FALSE) %>%
      ax_series(list(name = "x",
                     data = df$x),
                list(name = "y",
                     data = df$y),
                list(name = "z",
                     data = df$z)) %>%
      ax_xaxis(categories = df$time) %>%
      ax_yaxis(
        show = TRUE,
        labels = list(minWidth = 60),
        title = list(text = "Some text in millions units")
      ) %>%
      ax_title(text = "Output of plot 2")
    return(aplot2)
  })
}

shinyApp(ui = ui, server = server)

[pvictor]

Hello Alik,

Everything's fine here, I hope it's the same for you.

Plots dont't animate the second time because they are already generated, you can force update using auto_update = FALSE in apexchart, here's your example modified:

library(apexcharter)
library(dplyr)
library(shiny)

ui <-
  fluidPage(
    radioButtons(
      "radio_output_type",
      label = "Select Complication:",
      choices = list("One", "Two"),
      selected = "One"
    ),
    apexchartOutput("main_chart")
  )

server <- function(input, output, session) {

  df <- data.frame(
    time = c(2020, 2025, 2030, 2035, 2040),
    x = c(10.1, 20.3, 30.4, 40.7, 50.8),
    y = c(3.4, 6.7, 10.1, 13.6, 16.9),
    z = c(6.8, 13.6, 20.3, 27.1, 33.9)
  )

  output$main_chart <- renderApexchart({
    # Common options
    ax <- apexchart(auto_update = FALSE) %>%
      ax_chart(type = "bar") %>%
      ax_grid(show = FALSE) %>%
      ax_yaxis(
        show = TRUE,
        labels = list(minWidth = 60),
        title = list(text = "Some text in millions units")
      )
    # data and title
    if (input$radio_output_type == "One") {
      ax %>% 
        ax_series(list(name = "x",
                       data = df$x),
                  list(name = "y",
                       data = df$y),
                  list(name = "z",
                       data = df$z)) %>%
        ax_xaxis(categories = df$time) %>%
        ax_title(text = "Output of plot 1")
    } else {
      df <- df %>% 
        filter(time != 2020)
      ax %>% 
        ax_series(list(name = "x",
                       data = df$x),
                  list(name = "y",
                       data = df$y),
                  list(name = "z",
                       data = df$z)) %>%
        ax_xaxis(categories = df$time) %>%
        ax_title(text = "Output of plot 2")
    }
  })

}

shinyApp(ui = ui, server = server)

Victor

[Alik-V]

I didn't know you can structure the chain that way, it will simplify my app with 20 odd similar-looking graphs a lot! Thanks Victor :)