score:1
Accepted answer
Thanks to Pork Chop, the app is working. I needed to change the canvasClicked
part in the new JS("function(event) { ... }")
to get the app working. The sample code now looks like:
library(shiny)
library(dplyr)
library(highcharter)
ui <- shinyUI(
fluidPage(
column(width = 4, highchartOutput("hcontainer", height = "500px")),
column(width = 4, highchartOutput("hcontainer2", height = "500px")),
column(width = 4, highchartOutput("hcontainer3", height = "500px")) #added add highcharter output
)
)
server <- function(input, output, session) {
df <- data.frame(year = c(rep(c(2013, 2014, 2015, 2016, 2017), 4)),
level_2 = c(rep(c(10, 10, 10, 10, 10, 11, 11, 11, 11, 11),2)),
level_3 = c(101, 101, 101, 101, 101, 111, 111, 111, 111, 111,
102, 102, 102, 102, 102, 112, 112, 112, 112, 112),
level_4 = c(c(1011, 1011, 1011, 1011, 1011, 1111, 1111, 1111, 1111, 1111,
1021, 1021, 1021, 1021, 1021, 1122, 1122, 1122, 1122, 1122)), # additional level added
labour = c(1, 5, 10, 20, 25, 5, 10, 20, 25, 30,
2, 6, 11, 21, 26, 6, 11, 21, 26, 31))
output$hcontainer <- renderHighchart({
temp <- df %>%
group_by(year, level_2) %>%
summarize(Sum = sum(labour)) %>%
arrange(level_2)
hchart(temp, "line", hcaes(x = year, y = Sum, group = level_2)) %>%
hc_plotOptions(series = list(events = list(click = canvasClickFunction)))
})
canvasClickFunction <- JS("function(event) {Shiny.onInputChange('canvasClicked', [this.name, event.point.category]);}")
#second highcharter which should appear when user clicked on the serie named 10
output$hcontainer2 <- renderHighchart({
req(input$canvasClicked[[1]])
temp2 <- df %>%
filter(level_2 == input$canvasClicked[[1]]) %>% # filter selected by click
group_by(year, level_3) %>%
summarize(Sum = sum(labour)) %>%
arrange(level_3)
hchart(temp2, "line", hcaes(x = year, y = Sum, group = level_3)) %>%
hc_title(text = paste0("I clicked ",input$canvasClicked[[1]])) %>%
hc_plotOptions(series = list(events = list(click = canvasClickFunction2)))
})
canvasClickFunction2 <- JS("function(event) {Shiny.onInputChange('canvasClicked2', [this.name, event.point.category]);}")
output$hcontainer3 <- renderHighchart({
req(input$canvasClicked2[[1]])
temp3 <- df %>%
filter(level_3 == input$canvasClicked2[[1]]) %>% # filter selected by click
group_by(year, level_4) %>%
summarize(Sum = sum(labour)) %>%
arrange(level_4)
hchart(temp3, "line", hcaes(x = year, y = Sum, group = level_4)) %>%
hc_title(text = paste0("I clicked ",input$canvasClicked2[[1]])) #%>%
})
}
shinyApp(ui = ui, server = server)
I will accept the answer for reference once i'm able to (after two days).
Source: stackoverflow.com
Related Query
- using JS event function twice in shiny R to create a dropdown
- How to create a highcharter event function to create a “dropdown function” in Shiny R
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Using global data in High Charts point click custom function in R Shiny
- How to create a drilleable bar graph in jsp page using open source charts API
- why is afterSetExtremes function being called twice highcharts using react
- How to create a column range chart in Highcharts using range and navigator functions?
- Using Highcharts.js to create a punch card style graph
- Serializing a function as a parameter in json using C#
- create a sticky tooltip for a point or a permanent label using HighCharts
- how to get chart object inside a point event function in Highcharts
- How to create Chart Data using SQL query
- Create Density Heatmap Chart using Jquery with array of data
- Uncaught TypeError: undefined is not a function when using highcharts
- How can i create doughnut chart using oxyplot in xamarin.android?
- How to call typescript function inside High chart click event
- how to create donut chart using highcharts?
- create a donut chart using highchart using jquery json object
- using angular directive to draw highchart pie chart but when i am using it in success function it is not working
- developing interactive app using shiny and highcharter
- Highcharts - Using a function to change the tooltip
- jQuery Highcharts: change chart type using dropdown list
- Highchart not rendering in shiny using 'Highcharter' package
- When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
- Using the DotNet.HighCharts Library To Create Chart Based on DataTable Result From Webservice
- How to attach click event function in Highcharts
- Click event and two way data binding in HighCharts using AngularJS
- How To Call A Function To Make A Graph Using HighCharts in PHP
- Can we create pie chart and scatter plot combined using highcharts.js?
- Append a jQuery variable to a click event handler function
More Query from same tag
- web interface using jQuery for Java application
- Highmaps add and join data from Google Spreadsheet
- Error while downloading "highcharter" package in r
- Highcharts v6.0.0 Annotations Not Working
- Highcharts jumping a whole month
- Highcharts line chart doesn't render when sql returns more than 121 rows
- How can I put custom color in High Charts PIE data | Slice and want to change slice text
- How to send JSON using JSF2 Primefaces Request Context to Highchart?
- Highcharts title background can't be changed
- How can I get HighCharts column chart to scale the yAxis to not have so much whitespace?
- Highcharts : point.key is too long and make chart small
- Comparing percentage with Highstock
- Highcharts - three series using left Y axis and the fourth using the right Y axis
- Never want to hide tooltip on highcharts
- highcharts plugin cakephp option for 3d not found
- Converting String to Datetime Rails
- How to align centre a custom label in highcharts
- Highcharts - Reverse order of stacks on negative y-axis
- Highcharts Error #14 with SPServices
- Highcharts X-Axis value not completely displayed
- Pie Chart Not Popping Up HighCharts
- Highcharts Export to CSV No Data Grouping
- Dynamically create highcharts with bootstrap carousel
- Sending javascript function with JSON is possible?
- Highcharts: how to dynamically set up max value of yAxis, based on the displayed data?
- How to add text verticaly and horizantaly centered inside highchart solid gauge
- Highchart (stockchart) Yaxis on opposite side miss align when left axis is not visible
- Need to join x axis and y axis label highcharts
- Is a Highcharts heatmap possible with a datetime axis, in a single row?
- How to move x-axis labels to the left using highcharts?