Show/hide serie in highchart/shiny with an action button Automatisation

Question

I have found an example here and it perfectly match with what I want to do.

The only problem is that it's not automatisate : i would need an action button which hide all the serie on the graph even if some are added.

I tried with a for loop but i didn't succeed.

Here is what I tried code : (for the original code, it's in with the link)

library('shiny')
library('shinydashboard')
library('highcharter')
library('evaluate')
library('V8')
library("shinyWidgets")
library('devtools')
library('shinyjs')
#install.packages("devtools")

data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                    serie1 = c(1563, 1458, 205, 695),
                    serie2 = c(562, 258, 17, 115))

name <- list("serie1", "serie2")
str(name)

jsCode <- "
shinyjs.toggleSerie = function(params) {

for(int i = 1; i < name.length; i++)
{
string serieToToggle = $('#plot').highcharts().get(name[i]);

if(serieToToggle.visible){
serieToToggle.setVisible(false);
} 
else {
serieToToggle.setVisible(true);
} 
}
}
"

ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  shinyWidgets::materialSwitch(
  inputId = "button",
  label = "Button",
  value = FALSE
  ),
  highchartOutput(outputId = "plot"),
 highchartOutput(outputId = "plot2")
 )
 )

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

 output$plot <- renderHighchart({
  data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                        serie1 = c(1563, 1458, 205, 695),
                        serie2 = c(562, 258, 17, 115))
 highchart() %>%
  hc_chart(
    type = 'bar'
  ) %>%
  hc_add_series(
    data = data_plot$serie1,
    name = 'Serie to hide/show',
    id = name[0]
  ) %>%
  hc_add_series(
    data = data_plot$serie2,
    name = 'Serie 2',
    id = name[1]
  ) %>%
  hc_xAxis(
    categories = data_plot$categories,
    title = list(text = 'Categories')
  ) %>%
  hc_plotOptions(bar = list(stacking = 'normal'))
 })

output$plot2 <- renderHighchart({
data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                        serie1 = c(1563, 1458, 205, 695),
                        serie2 = c(562, 258, 17, 115))
highchart() %>%
hc_chart(
type = 'bar'
) %>%
hc_add_series(
data = data_plot$serie1,
name = 'Serie to hide/show',
id = 'efwg'
) %>%
hc_add_series(
data = data_plot$serie2,
name = 'Serie 2',
id = 'rioij'
) %>%
hc_xAxis(
categories = data_plot$categories,
title = list(text = 'Categories')
) %>%
hc_plotOptions(bar = list(stacking = 'normal'))
})

onclick(id = "button", expr = {
js$toggleSerie()
})

session$onSessionEnded(stopApp)
}

shinyApp(ui = ui, server = server)

You said you tried the for loop, but I dont see one in the sample provided — Pork Chop

Stéphane Laurent Stéphane Laurent · Accepted Answer · 2019-05-10T10:05:10

You have to pass the series names to the toggleSerie function through the params argument. And there are small mistakes in your code. The first index of an array in JavaScript is 0, not 1, and in R the first index of a vector is 1, not 0.

library('shiny')
library('shinydashboard')
library('highcharter')
library("shinyWidgets")
library('shinyjs')

data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                        serie1 = c(1563, 1458, 205, 695),
                        serie2 = c(562, 258, 17, 115))

series <- c("serie1", "serie2")

jsCode <- "
shinyjs.toggleSerie = function(params) {

for(var i = 0; i < params.names.length; i++)
{
  var serieToToggle = $('#plot').highcharts().get(params.names[i]);
  if(serieToToggle.visible){
    serieToToggle.setVisible(false);
  } 
  else {
    serieToToggle.setVisible(true);
  } 
}
}
"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jsCode),
    materialSwitch(
      inputId = "button",
      label = "Button",
      value = FALSE
    ),
    highchartOutput(outputId = "plot")
  )
)

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

  output$plot <- renderHighchart({
    data_plot <- data.frame(categories = c("A", "B", "C", "D"),
                            serie1 = c(1563, 1458, 205, 695),
                            serie2 = c(562, 258, 17, 115))
    highchart() %>%
      hc_chart(
        type = 'bar'
      ) %>%
      hc_add_series(
        data = data_plot$serie1,
        name = 'Serie to hide/show',
        id = series[1]
      ) %>%
      hc_add_series(
        data = data_plot$serie2,
        name = 'Serie 2',
        id = series[2]
      ) %>%
      hc_xAxis(
        categories = data_plot$categories,
        title = list(text = 'Categories')
      ) %>%
      hc_plotOptions(bar = list(stacking = 'normal'))
  })

  onclick(id = "button", js$toggleSerie(names = series))

}

shinyApp(ui = ui, server = server)

Show/hide serie in highchart/shiny with an action button Automatisation

1 Answers