1

I was able to create a reactive table from a click event based on the answer provided from the following question, Highcharter - Click event to filter data from graph, however I can't seem to figure out how to add a reactive highchart instead of the table. The code below demonstrates how to make the table.

library (shiny)
library (shinydashboard)
library (dplyr)
library (tibble)
library (highcharter)
library(shinyjs)
library (DT)

rm(list=ls())
header <- dashboardHeader()
sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(
    box(
      tags$head(tags$style(HTML("#OnTime{height:20vh !important;} "))),
      title = "On Time", status = "primary", solidHeader = TRUE, width = 6,
      highchartOutput("OnTime")
    )
  ),
  fluidRow(
    box(
      title = "WIP Table", status = "primary", solidHeader = TRUE,
      DT::dataTableOutput("Table")
###I know i need to replace this with a highchartOutput

    )
  ),
  fluidRow(
    box(
      textOutput("text")
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

  Customer <- c("England", "France", "US", "Canada", "England", "France", "US", "Canada", "England")
  OnTime <- c("On Time", "On Time", "Overdue", "On Time", "Overdue", "On Time", "Overdue","On Time", "On Time")
  Gate <- c(1,2,3,2,3,2,1,2,3)
  Quantity <- c(1,1,1,1,1,1,1,1,1)

  data <- data.frame(Customer,OnTime,Gate, Quantity)

  output$OnTime <- renderHighchart({

    Lvl1GroupingStatus <- aggregate(data$Quantity, by = list(data$OnTime),FUN=sum)
    Lvl1dfStatus <- data_frame(name = Lvl1GroupingStatus$Group.1,y = Lvl1GroupingStatus$x,drilldown = tolower(name))

    Lvl2WIPOverDue <- data[data$OnTime == "Overdue",]
    Lvl2WIPOverDueb <- aggregate(Lvl2WIPOverDue$Quantity, by = list(Lvl2WIPOverDue$Customer),FUN=sum)
    Lvl2dfWIPOverDue <- arrange(data_frame(name = Lvl2WIPOverDueb$Group.1,value = Lvl2WIPOverDueb$x),desc(value))

    Lvl2WIPOnTime <- data[data$OnTime == "On Time",]
    Lvl2WIPOnTimeb <- aggregate(Lvl2WIPOnTime$Quantity, by = list(Lvl2WIPOnTime$Customer),FUN=sum)
    Lvl2dfWIPOnTime <- arrange(data_frame(name = Lvl2WIPOnTimeb$Group.1,value = Lvl2WIPOnTimeb$x),desc(value))

    ClickFunction <- JS("function(event) {Shiny.onInputChange('Clicked', event.point.name);}")

    highchart() %>%
      hc_chart(type = "column") %>%
      hc_xAxis(type = "category") %>%
      hc_legend(enabled = FALSE) %>%
      hc_yAxis(gridLineWidth = 0) %>%
      hc_plotOptions(series = list(column = list(stacking = "normal"), 
                                   borderWidth=0,
                                   dataLabels = list(enabled = TRUE),
                                   events = list(click = ClickFunction)
                                   )
                     ) %>%
      hc_add_series(data=Lvl1dfStatus,name="Status", colorByPoint = TRUE,colors = c("#003395","#D20000")) %>%

      hc_drilldown(
        allowPointDrilldown = TRUE,
        series = list(
          list(id = "overdue", data = list_parse2(Lvl2dfWIPOverDue), name="Customer"),
          list(id = "on time", data = list_parse2(Lvl2dfWIPOnTime), name="Customer")

        )
      )
  })

  makeReactiveBinding("outputText")

  observeEvent(input$Clicked, {
    outputText <<- paste0(input$Clicked)
    })

  output$text <- renderText({
    outputText
    })
###Can I use this same filtering format with highchart instead of DT?
  output$Table <- DT::renderDataTable({

    temp <- data
    rowcheck <- temp[temp$OnTime == input$Clicked,]

    if (nrow(rowcheck)!=0) {
      temp <- temp[temp$OnTime == input$Clicked,]
      Lvl1Click <<- input$Clicked
    }
    else {
      temp <- temp[temp$OnTime == Lvl1Click,]
      temp <- temp[temp$Customer == input$Clicked,]
    }

    return (temp)

    })
}

#Combines Dasboard and Data together
shinyApp(ui, server)

thanks!

The code below is where i am having issues. Assume I've updated the body to show a second highchart vs a table.

output$chart2<- renderhighchart({

    temp <- data
    rowcheck <- temp[temp$RESERVOIR == input$Clicked,]

    if (nrow(rowcheck)!=0) {
      temp <- temp[temp$RESERVOIR == input$Clicked,]
      Lvl1Click <<- input$Clicked
    }
    else {
      temp <- temp[temp$RESERVOIR == Lvl1Click,]
      temp <- temp[temp$RESERVOIR == input$Clicked,]
    }

    return (temp)

hchart(**temp**, "scatter", hcaes(x = Customer, y = Quantity))

This does not work. I'm not sure where/how to include the temp dataset in the hchart.

This is the follow up after changing to highchartoutput and renderHighchart.

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

  Customer <- c("England", "France", "US", "Canada", "England", "France", "US", "Canada", "England")
  OnTime <- c("On Time", "On Time", "Overdue", "On Time", "Overdue", "On Time", "Overdue","On Time", "On Time")
  Gate <- c(1,2,3,2,3,2,1,2,3)
  Quantity <- c(1,1,1,1,1,1,1,1,1)

  data <- data.frame(Customer,OnTime,Gate, Quantity)

  output$OnTime <- renderHighchart({

    Lvl1GroupingStatus <- aggregate(data$Quantity, by = list(data$OnTime),FUN=sum)
    Lvl1dfStatus <- data_frame(name = Lvl1GroupingStatus$Group.1,y = Lvl1GroupingStatus$x,drilldown = tolower(name))

    Lvl2WIPOverDue <- data[data$OnTime == "Overdue",]
    Lvl2WIPOverDueb <- aggregate(Lvl2WIPOverDue$Quantity, by = list(Lvl2WIPOverDue$Customer),FUN=sum)
    Lvl2dfWIPOverDue <- arrange(data_frame(name = Lvl2WIPOverDueb$Group.1,value = Lvl2WIPOverDueb$x),desc(value))

    Lvl2WIPOnTime <- data[data$OnTime == "On Time",]
    Lvl2WIPOnTimeb <- aggregate(Lvl2WIPOnTime$Quantity, by = list(Lvl2WIPOnTime$Customer),FUN=sum)
    Lvl2dfWIPOnTime <- arrange(data_frame(name = Lvl2WIPOnTimeb$Group.1,value = Lvl2WIPOnTimeb$x),desc(value))

    ClickFunction <- JS("function(event) {Shiny.onInputChange('Clicked', event.point.name);}")

    highchart() %>%
      hc_chart(type = "column") %>%
      hc_xAxis(type = "category") %>%
      hc_legend(enabled = FALSE) %>%
      hc_yAxis(gridLineWidth = 0) %>%
      hc_plotOptions(series = list(column = list(stacking = "normal"), 
                                   borderWidth=0,
                                   dataLabels = list(enabled = TRUE),
                                   events = list(click = ClickFunction)
      )
      ) %>%
      hc_add_series(data=Lvl1dfStatus,name="Status", colorByPoint = TRUE,colors = c("#003395","#D20000")) %>%

      hc_drilldown(
        allowPointDrilldown = TRUE,
        series = list(
          list(id = "overdue", data = list_parse2(Lvl2dfWIPOverDue), name="Customer"),
          list(id = "on time", data = list_parse2(Lvl2dfWIPOnTime), name="Customer")

        )
      )
  })

  makeReactiveBinding("outputText")

  observeEvent(input$Clicked, {
    outputText <<- paste0(input$Clicked)
  })

  output$text <- renderText({
    outputText
  })
  ###Can I use this same filtering format with highchart instead of DT?
  output$chart2 <- renderHighchart({

    temp <- data
    rowcheck <- temp[temp$OnTime == input$Clicked,]

    if (nrow(rowcheck)!=0) {
      temp <- temp[temp$OnTime == input$Clicked,]
      Lvl1Click <<- input$Clicked
    }
    else {
      temp <- temp[temp$OnTime == Lvl1Click,]
      temp <- temp[temp$Customer == input$Clicked,]
    }

    return (temp)

hchart(temp, "scatter", hcaes(x = Customer, y = Quantity))

  })
}

#Combines Dasboard and Data together
shinyApp(ui, server)

Running the above code gets shows the image below

shiny output after click

jsimpsno
  • 448
  • 4
  • 19
  • I am not entirely sure where your problem is. Why you cannot just use the filtered data that you display in DT for a highcharter plot is unclear to me. – mnist Oct 23 '19 at 15:31
  • i''m sure it's a really easy problem to solve, i'm just not seeing it. I'll update my question to show where my issue is. – jsimpsno Oct 23 '19 at 16:13
  • replacing `renderDataTable` by `renderHighchart` (maybe the typo is your issue) as well as `dataTableOutput` by `highchartOutput` does it for me – mnist Oct 23 '19 at 16:48
  • I updated with your suggestion but it still doesn't appear to work. I've added an image of my output and the updated code to the question. – jsimpsno Oct 23 '19 at 16:57

1 Answers1

1

Since I cannot post that much into a comment, here is my solution. However, I am not 100% sure whether this is what OP intended

library (shiny)
library (shinydashboard)
library (dplyr)
library (tibble)
library (highcharter)
library(shinyjs)
library (DT)

rm(list=ls())
header <- dashboardHeader()
sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(
    box(
      tags$head(tags$style(HTML("#OnTime{height:20vh !important;} "))),
      title = "On Time", status = "primary", solidHeader = TRUE, width = 6,
      highchartOutput("OnTime")
    )
  ),
  fluidRow(
    box(
      title = "WIP Table", status = "primary", solidHeader = TRUE,
      highchartOutput("Table")
      ###I know i need to replace this with a highchartOutput

    )
  ),
  fluidRow(
    box(
      textOutput("text")
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

  Customer <- c("England", "France", "US", "Canada", "England", "France", "US", "Canada", "England")
  OnTime <- c("On Time", "On Time", "Overdue", "On Time", "Overdue", "On Time", "Overdue","On Time", "On Time")
  Gate <- c(1,2,3,2,3,2,1,2,3)
  Quantity <- c(1,1,1,1,1,1,1,1,1)

  data <- data.frame(Customer,OnTime,Gate, Quantity)

  output$OnTime <- renderHighchart({

    Lvl1GroupingStatus <- aggregate(data$Quantity, by = list(data$OnTime),FUN=sum)
    Lvl1dfStatus <- data_frame(name = Lvl1GroupingStatus$Group.1,y = Lvl1GroupingStatus$x,drilldown = tolower(name))

    Lvl2WIPOverDue <- data[data$OnTime == "Overdue",]
    Lvl2WIPOverDueb <- aggregate(Lvl2WIPOverDue$Quantity, by = list(Lvl2WIPOverDue$Customer),FUN=sum)
    Lvl2dfWIPOverDue <- arrange(data_frame(name = Lvl2WIPOverDueb$Group.1,value = Lvl2WIPOverDueb$x),desc(value))

    Lvl2WIPOnTime <- data[data$OnTime == "On Time",]
    Lvl2WIPOnTimeb <- aggregate(Lvl2WIPOnTime$Quantity, by = list(Lvl2WIPOnTime$Customer),FUN=sum)
    Lvl2dfWIPOnTime <- arrange(data_frame(name = Lvl2WIPOnTimeb$Group.1,value = Lvl2WIPOnTimeb$x),desc(value))

    ClickFunction <- JS("function(event) {Shiny.onInputChange('Clicked', event.point.name);}")

    highchart() %>%
      hc_chart(type = "column") %>%
      hc_xAxis(type = "category") %>%
      hc_legend(enabled = FALSE) %>%
      hc_yAxis(gridLineWidth = 0) %>%
      hc_plotOptions(series = list(column = list(stacking = "normal"), 
                                   borderWidth=0,
                                   dataLabels = list(enabled = TRUE),
                                   events = list(click = ClickFunction)
      )
      ) %>%
      hc_add_series(data=Lvl1dfStatus,name="Status", colorByPoint = TRUE,colors = c("#003395","#D20000")) %>%

      hc_drilldown(
        allowPointDrilldown = TRUE,
        series = list(
          list(id = "overdue", data = list_parse2(Lvl2dfWIPOverDue), name="Customer"),
          list(id = "on time", data = list_parse2(Lvl2dfWIPOnTime), name="Customer")

        )
      )
  })

  makeReactiveBinding("outputText")

  observeEvent(input$Clicked, {
    outputText <<- paste0(input$Clicked)
  })

  output$text <- renderText({
    outputText
  })
  ###Can I use this same filtering format with highchart instead of DT?
  output$Table <- renderHighchart({

    temp <- data
    rowcheck <- temp[temp$OnTime == input$Clicked,]

    if (nrow(rowcheck)!=0) {
      temp <- temp[temp$OnTime == input$Clicked,]
      Lvl1Click <<- input$Clicked
    }
    else {
      temp <- temp[temp$OnTime == Lvl1Click,]
      temp <- temp[temp$Customer == input$Clicked,]
    }

    hchart(temp, "scatter", hcaes(x = Customer, y = Quantity))


  })
}

#Combines Dasboard and Data together
shinyApp(ui, server)

This is my output: enter image description here

mnist
  • 6,571
  • 1
  • 18
  • 41
  • Thank you! your's worked for me as well. Not a big issue, but do you know how to remove the bottom box labeled on time? Thanks again for your help. – jsimpsno Oct 23 '19 at 18:12
  • well, you create it youself in , fluidRow( box( textOutput("text") ) – mnist Oct 23 '19 at 18:19
  • dear @mnist could you please help with this https://stackoverflow.com/questions/59431981/how-to-create-two-independent-drill-down-plot-using-highcharter – John Smith Dec 21 '19 at 11:26