Javascript in R Dashboard: Understanding the Highcharter Plot$Series(Event)

As a data analyst and enthusiast of Shiny applications, you’re likely familiar with using JavaScript to enhance your interactive dashboards. In this article, we’ll delve into the world of Highcharter plots and explore how to incorporate custom JavaScript code within the plot$series(event) function.

Introduction

Highcharter is an R package that provides an interface for creating highcharts and other chart types in Shiny applications. When working with Highcharter, it’s common to want to add interactivity to your charts, such as zooming, panning, or clicking on specific series. This can be achieved by using the plot$series(event) function.

The Problem

In the given example, the user has found a suitable JavaScript code snippet that should work with their Highcharter plot but is unsure about where to place it within the R dashboard script. This problem highlights a common challenge when working with interactive charts: understanding how to integrate custom JavaScript code seamlessly into your Shiny application.

The Solution

To solve this issue, we’ll break down the steps involved in incorporating custom JavaScript code into your Highcharter plot using the plot$series(event) function.

Step 1: Update the Shiny App Structure

Before diving into the JavaScript code, let’s review the basic structure of our Shiny app. We’ve created a dashboard with a header, sidebar, and body, which contains our highchart output:

ui <- dashboardPage(
  dashboardHeader(title = "My Dashboard"),
  dashboardSidebar(),
  dashboardBody(highchartOutput("hc1"))
)

Step 2: Update the Highcharter Code

Next, we need to update our Highcharter code to include the custom JavaScript snippet. We’ll add a new plotOptions argument within the highcharter() function:

server <- function(input, output, session) {
  # Normal Chart
  output$hc1 <- renderHighchart({
    Hch <- highchart(hcaes(x = Spring, y = Ponctuation)) %>%
      hc_title(text = "Graph", margin = 20, align = "left",
               style = list(color = "#FE8000", useHTML = TRUE)) %>%
      hc_xAxis(categories = data_plot$categories, title = list(text = "Number of spring",
                                                               color = "#FE8000")) %>%
      hc_yAxis(title = list(text = "Result", color = "#FE8000")) %>%
      hc_add_series(name = 'serie1', data = data_plot$serie1) %>%
      hc_add_series(name = 'serie2', data = data_plot$serie2) %>%
      hc_add_series(name = 'serie3', data = data_plot$serie3) %>%
      hc_add_series(name = 'serie4', data = data_plot$serie4) %>%
      hc_add_series(name = 'serie5', data = data_plot$serie5) %>%
      hc_plotOptions(series = list(events = list(legendItemClick = jsCode)))
    
    Hch
  })
}

Step 3: Define the Custom JavaScript Code

Now that we’ve updated our Highcharter code, let’s define the custom JavaScript function:

jsCode <- JS("function(event) {
  if (!this.visible)
    return false;

  var seriesIndex = this.index;
  var series = this.chart.series;

  for (var i = 0; i < series.length; i++) {
    if (series[i].index != seriesIndex) {
      series[i].visible ?
        series[i].hide() :
        series[i].show();
    }
  }
  return false;
}")

Conclusion

In this article, we’ve explored how to incorporate custom JavaScript code into your Highcharter plot using the plot$series(event) function. By following these steps, you should now be able to add interactivity to your charts and create more engaging Shiny applications.

Best Practices

• Always review the official documentation for Highcharter and Shiny packages to ensure you’re using the most up-to-date features.
• Use a consistent naming convention for your JavaScript variables and functions.
• Test your code thoroughly to avoid unexpected behavior or errors.
• Consider sharing your custom JavaScript code on GitHub or other public repositories for others to benefit from.

Next Steps

If you have any questions or need further assistance, feel free to ask. You can also explore additional Highcharter features and Shiny applications using the RStudio built-in IDE.

Last modified on 2023-06-21