I'm trying to display a stacked bar plot when someone click in a specific country on a highcharter map

48 Views Asked by At

I've been able to make a highcharter map which is updatable depending on the year you want to see (2000 to 2020). Now I have to make a highcharter stacked bar plot to display specific information about a selected country in a selected year. This is my code to make it :

#library
library(shiny)
library(shinydashboard)
library(leaflet)
library(echarts4r)
library(highcharter)
library(dplyr)

ui<-dashboardPage(
  dashboardHeader(
    title = "MENA ESG",
    titleWidth = 650
  dashboardSidebar(
    #SidebarMenu
    sidebarMenu(
      id="sidebar",
      
      #firstItem
      menuItem(text="Vizualisation", tabName = "viz", icon=icon("chart-line")),
      menuItem(text = "Dataset", tabName="data", icon=icon("database"))
    )
  ),
  dashboardBody(
    tabItems(
      #first tab Item
      tabItem(tabName = "viz",
              box(sliderInput("year", label="Choose a year:", min=2000, max=2020, value = 2011), actionButton("reset", "Reset", icon("refresh"), class = "btn btn-primary btn-sm"), width = 2000),
                box(
                
                  #a card for the map
                  title = "Map",
                  closable = FALSE,
                  collapsible = FALSE,
                  width = 6,
                  height = "950px",
                  highchartOutput("chart",width="100%",height = "800px", clickOpts())
                  
                ),
              
              # a column with the two graphs
              column(
                width = 6,
                # box for the countries' ESG components details graph
                box(
                  width = 12,
                  closable = F,
                  collapsible = F,
                  title = "Countries' ESG components details",
                  highchartOutput("stacked_plot")
                ),
                # box for Each ESG components details graph
                box(
                  width = 12,
                  closable = F,
                  collapsible = F,
                  title = "Votes in percent",
                  TextOutput("text")
                )
              )
      ),
      
      #second tabItem
      tabItem(tabName = "data",
              tabBox()
    )
      
    )
  )

)


server<-function(input,output,session){
  
  # Click event for the map (will use to generate chart)
  ClickFunction <- JS("function(event) {Shiny.onInputChange('selected_country', event.point.name);}")
  
  # reative variable to stock the selected country
  selected_country <- reactiveVal()
  
  # React to the click event on the map
  observeEvent(input$selected_country, {
    selected_country(input$selected_country)
  })
    
  data(worldgeojson, package = "highcharter")
  
  observeEvent(input$reset, {
    updateSliderInput(session, "year", value = 2011)
  })
  
  
  short_data <- reactive(
    {
      data_ESG %>%
        filter(data_ESG$Years == as.numeric(input$year)) %>% 
        group_by(Country) 
    }
  )
  
  
  output$chart<-renderHighchart(
    highchart(type="map")%>%
      hc_add_series_map(
        worldgeojson, short_data(), value = "ESG", joinBy = c('name','Country'),
        name=paste0('ESG index '= input$year))%>%
      hc_plotOptions(map=list(
        events = list(click = ClickFunction)
      )
      )%>%
      hc_colorAxis(stops=color_stops())%>%
      hc_title(text= "Middle East and North Africa Countries ESG index")%>%
      hc_subtitle(text = paste0('Score of Year: ',input$year))
  )
  
  
  
  
  output$stacked_plot<-renderHighchart(
  
  selected <- selected_country(),
  
  # Filter data for the selected country
  selected_data <- subset(data_ESG, Country == selected),
  
  if (is.null(selected)) {
    #display the first country in the data if no country is selected yet
    selected <- data_ESG$Country[1]
    selected_country(selected)
  }
  
      highchart() %>% 
        hc_chart(type = "column") %>% 
        hc_title(text = "MyGraph") %>% 
        hc_plotOptions(column = list(
          dataLabels = list(enabled = FALSE),
          stacking = "normal",
          enableMouseTracking = TRUE)
        ) %>% 
        hc_xAxis(categories = data_ESG$selected_country()) %>%
        hc_yAxis(title = list(text = "Component"))%>%
        hc_add_series(new_series <- list(
          name = "SODI",
          data = selected_data$SODI
        ))%>%
        hc_add_series( list(
          name = "ENVI",
          data = selected_data$ENVI
        ))%>%
        hc_add_series(list(
          name = "GOVI",
          data = selected_data$GOVI
        ))
        
  
    
  )
 
}

shinyApp(ui,server)

with this code I get this shiny app: enter image description here

In the Countries' ESG components details, I should have a stacked bar plot that is updatable depending on which country and which year is selected, but, I don't get anything and I need your held to figure out the issue.

Any help is welcome ! thanks !

0

There are 0 best solutions below