Integrating Return Data from Dynamic Highcharts Chart in Shiny

In this article, we will explore how to use return data from a dynamic Highcharts chart in a Shiny application. We will delve into the details of the code and provide explanations for each step.

Introduction

Highcharts is a popular JavaScript library used for creating interactive charts. In Shiny, we can embed Highcharts using the highcharter package. However, one common requirement is to access and manipulate data returned from the chart. In this article, we will focus on how to achieve this in Shiny.

Understanding Highcharts

Before diving into the code, let’s understand how Highcharts works. When a user interacts with a chart, such as dragging points or clicking on them, Highcharts sends event notifications to the JavaScript code. These events can be used to update data and perform other actions. In this case, we want to access and return data from the chart.

Key Concepts

To solve this problem, we need to:

1. Use the drop event in Highcharts, which is triggered when a user drops a point on the chart.
2. Pass data back to Shiny using Shiny.onInputChange.
3. Create a render function using renderDataTable.

Code Explanation

Let’s break down the code:

Server.R

In the server-side code (server.R), we define a reactive expression that creates a Highcharts chart:

hcbase <- reactive({
  hc <- highchart()
  
  # ... other configuration options ...
  
  hc %>% 
    hc_plotOptions(
      series = list(
        point = list(
          events = list(
            drop = JS("function(){
                      console.log(this.series)
                      window.data = _.map(this.series.data, function(e) { return e.y })
                      Shiny.onInputChange('inputname', data);
                    }"))
          )
        )
      )
    ) %>% 
    hc_add_series(
      data = citytemp$berlin,
      draggableY = TRUE
    )
}

In this code:

• We create a reactive expression (hcbase) that defines the Highcharts chart.
• We configure the point options to listen for the drop event.
• When an event is triggered, we log the series data and update the window.data variable with the y-values of the dropped point.
• We use Shiny.onInputChange to pass the updated data back to Shiny.

UI.R

In the user interface code (ui.R), we define a render function that uses the returned data:

renderDataTable({
  var <- input$inputname # listening the drop event
  
  output$table <- renderDataTable({
    datatable(month = citytemp$month, berlin = citytemp$berlin)
  })
})

In this code:

• We create a render function (renderDataTable) that listens for changes to input$inputname.
• When an update occurs, we use the returned data in the datatable function.

Example Use Case

Here’s an example of how you can use this approach in your Shiny app:

library(shiny)
library(highcharter)

# Create a sample dataset
citytemp <- data.frame(month = c("Jan", "Feb", "Mar"), berlin = c(10, 20, 30))

# Define the UI and server code

ui <- fluidPage(
  box(width = 6, highchartOutput("highchart")),
  box(width = 6, dataTableOutput("table"))
)

server <- function(input, output) {
  # Create a reactive expression that defines the Highcharts chart
  hcbase <- reactive({
    hc <- highchart()
    
    # ... other configuration options ...
    
    hc %>% 
      hc_plotOptions(
        series = list(
          point = list(
            events = list(
              drop = JS("function(){
                        console.log(this.series)
                        window.data = _.map(this.series.data, function(e) { return e.y })
                        Shiny.onInputChange('highchart_data', data);
                      }"))
            )
          )
        )
      ) %>% 
      hc_add_series(
        data = citytemp$berlin,
        draggableY = TRUE
      )
  })
  
  # Create a render function that uses the returned data
  output$table <- renderDataTable({
    var <- input$highchart_data # listening the drop event
    
    datatable(month = citytemp$month, berlin = citytemp$berlin)
  })
}

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

In this example:

• We create a sample dataset (citytemp) with two columns: month and berlin.
• We define the UI code using fluidPage, which includes two boxes that display a Highcharts chart and an interactive table.
• In the server code, we create a reactive expression that defines the Highcharts chart.
• When an update occurs in the chart (e.g., when a user drops a point), we log the series data and pass it back to Shiny using Shiny.onInputChange.
• We use the returned data in the render function (renderDataTable) to create an interactive table that updates dynamically.

By following this approach, you can integrate return data from dynamic Highcharts charts into your Shiny app, allowing users to interact with the chart and see the updated data reflected in a table.

Last modified on 2023-08-12