Shiny

John Coene

2024-02-16

New Features

Use (almost) any function on a dynamic proxy!

Documentation

echarts4r comes with proxies (functions ending in _p) as well as the ability access selected data. You will find a demo of shiny working with echarts4r here.

Shiny Demo

Deploy

A note if you are publishing on shinyapps.io, if you have locally installed the development version of the package from Github with remotes as indicated on the homepage of the website please reinstall it devtools. Otherwise shinyapps.io will intall the CRAN version which might lead to issues.

# install.packages("devtools")
devtools::install_github("JohnCoene/echarts4r")

If you are using the Shiny Server, remember to install the package on the respective server with the following command:

# stable version
sudo su - -c "R -e \"install.packages('echarts4r', repos = 'https://cran.rstudio.com')\""
# dev version
sudo su - -c "R -e \"remotes::install_github('JohnCoene/echarts4r')\""

Events

Get data from shiny with the following:

• elementId + _brush - returns data on brushed data points.
• elementId + _legend_change - returns series name of legend selected/unselected.
• elementId + _legend_selected - returns list of selected status for each series.
• elementId + _clicked_data - returns data of clicked data point.
• elementId + _clicked_data_value - returns value of clicked data point.
• elementId + _clicked_row - returns row number of clicked data point.
• elementId + _clicked_serie - returns name of serie of clicked data point.
• elementId + _mouseover_data - returns data on hovered data point.
• elementId + _mouseover_data_value - returns value of hovered data point.
• elementId + _mouseover_row - returns row o hovered data point.
• elementId + _mouseover_serie - returns name of serie of hovered data point.

If you want to implement a missing callback with e_distpatch_action_p.

Paul Simmering kindly created a demo app showcasing callbacks.

Callbacks demo

Proxies

Interact with the charts without redrawing (proxies):

• e_append1_p and e_append2_p - to add data to your chart.
• e_highlight_p and e_downplay_p - to highlight or downplay a serie.
• e_showtip_p and e_hidetip_p - to Show or hide the tooltip.
• e_draw_p to draw the chart, see function documentation for examples.
• e_focus_adjacency and e_unfocus_adjacency - to focus or unfocus on adjacent nodes (networks).
• e_mark_p to dynamically mark points, lines, and areas.

See the example below and the various proxies documentation.

library(shiny)
library(echarts4r)

ui <- fluidPage(
  actionButton("add", "Add Data to y"),
  echarts4rOutput("plot"),
  verbatimTextOutput("selected")
)

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

  data <- data.frame(x = rnorm(10, 5, 3), y = rnorm(10, 50, 12), z = rnorm(10, 50, 5))
  
  react <- eventReactive(input$add, {
    set.seed(sample(1:1000, 1))
    data.frame(x = rnorm(10, 5, 2), y = rnorm(10, 50, 10))
  })
  
  output$plot <- renderEcharts4r({
    data |> 
     e_charts(x) |> 
     e_scatter(y) |>
     e_scatter(z) |> 
     e_brush(throttleDelay = 1000)
  })
  
  observeEvent(input$add, {
    echarts4rProxy("plot") |> 
      e_append1_p(0, react(), x, y)
  })
  
  output$selected <- renderPrint({
    input$plot_brush
  })
  
}

shinyApp(ui, server)

Loading

You can also show a spinner while shiny recalculates.

Without loading, chart redraws with neat animation.

# no redraw
# no loading
library(shiny)
ui <- fluidPage(
  fluidRow(
    column(12, actionButton("update", "Update"))
  ),
  fluidRow(
    column(12, echarts4rOutput("plot"))
  )
)

server <- function(input, output){
  data <- eventReactive(input$update, {
    data.frame(
      x = 1:10,
      y = rnorm(10)
    )
  })
  
  output$plot <- renderEcharts4r({
    data() |> 
      e_charts(x) |> 
      e_bar(y)
  })
}

shinyApp(ui, server)

With loading.

# keep UI
# add loading
server <- function(input, output){
  data <- eventReactive(input$update, {
    Sys.sleep(1) # sleep one second to show loading
    data.frame(
      x = 1:10,
      y = rnorm(10)
    )
  })
  
  output$plot <- renderEcharts4r({
    data() |> 
      e_charts(x) |> 
      e_bar(y) |> 
      e_show_loading()
  })
}

shinyApp(ui, server)