score:13
Accepted answer
The following code will get it done. In brief, the key steps are:
- When initializing the map, be sure to specify a column as its
layerId
. This way Leaflet will know which values to return when you specify an event. - Create an
eventReactive
that returns the value of thatlayerId
. You can then use this to subset your data as needed to pass to the chart. - I like to create a reactive data frame that is the subset of the master data frame based on the clicked
layerId
. You could write the app without doing this but I like to separate my Shiny apps out into components as much as I can. - You can now use this reactive data frame - and its values - in your call to
renderHighchart
Hope this helps!
---
title: "Flex Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
library(highcharter)
latitude<-c(35.94077, 35.83770, 35.84545, 35.81584, 35.79387, 36.05600)
longitude<-c(-78.58010, -78.78084, -78.72444, -78.62568, -78.64262,-78.67600)
amounts1<-c(27, 44, 34, 46, 25, 15)
amounts2<-c(34, 52, 35, 78, 14, 24)
ids<-c("a", "b", "c", "d", "e", "f")
df<-data.frame(ids,amounts1,amounts2,latitude,longitude)
```
Column {data-width=650}
-----------------------------------------------------------------------
```{r}
output$map <- renderLeaflet({
leaflet() %>%
addTiles() %>%
addMarkers(data = df, lng = longitude, lat = latitude,
layerId = ~ids)
})
leafletOutput('map')
```
Column {data-width=350}
-----------------------------------------------------------------------
```{r}
click_marker <- eventReactive(input$map_marker_click, {
x <- input$map_marker_click
return(x$id)
})
data_for_chart <- reactive({
return(df[df$ids == click_marker(), ])
})
output$chart <- renderHighchart({
highchart() %>%
hc_chart(type = 'column') %>%
hc_add_series(data = c(data_for_chart()$amounts1,
data_for_chart()$amounts2))
})
highchartOutput('chart')
```
Source: stackoverflow.com
Related Query
- Flexdashboards and Leaflet and marker click with Highcharts
- Highcharts : How do I keep the marker formatting and make the click event fire with a 5K+ point scatter plot?
- Highcharts - Global configuration with common code and unique data & Headings
- container .fadeIn/Out with HighCharts and Leaflet
- How to Change marker symbol and dataLabel with custom style in Highcharts
- Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
- highcharts legend marker and series marker with different size
- Highcharts piechart with slice animation and drilldown on click together throws exception in chart and breaks the pie chart
- Displaying hours and minutes on x-axis with Highcharts
- how to import highcharts with webpack and babel
- Highcharts data series issue with ajax/json and PHP
- Highcharts / jQuery - destroy and rebuild chart with original options
- Highcharts : Chart with drilldown how to obtain click event of drill up button
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- highcharts how to catch and insert logic in click reset zoom button event
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Plotting seconds, minutes and hours on the yAxis with Highcharts
- Populate Highcharts X-Axis With Dates Given a From And To Date
- Highcharts with JSON data and multiple series
- highcharts draggable-points conflict between drag and click
- Highcharts blank chart with x and y axis
- How to structure Angular with Highcharts and lots of dynamic data
- Creating a line graph with highcharts and data in an external csv
- Highcharts connecting scatter chart and pie chart with single legend
- Highcharts v3.0.1 problems with rotating data labels in IE8 and jQuery v1.7.1
- Highcharts 3.0, area chart with stacked and unstacked series - how to fix?
- Programmatically draw rect and line in Highcharts with zoom
- How to enable noData with highcharts and angular
- How to export CSV and XLS with external button in Highcharts
- Click events on highcharts with multiple series
More Query from same tag
- Passing variable into highcharts solid gauge
- Highchart with Range selector for SQL Data in html website
- Remove the categories text under the bars on Highcharts chart
- How to show an additional column from CSV file as a tooltip in Highcharts
- In highcharts, is it possible get the exact position of x axis labels for overlap detection purpose?
- Joing multiple courtries in highmaps
- Highstock, error: Uncaught TypeError: w[(intermediate value)(intermediate value)(intermediate value)] is not a constructor
- HighCharts: Displaying 3 vu-meters
- Highchart uncaught error - Uncaught TypeError: $(...).highcharts is not a function
- Highcharts/highstock set yAxis Min and Max with Scroll
- Highcharts custom data for map in React TypeScript?
- Highstock columns overlapping one another even if there is space
- Highchart x-axis show label after specific days no matter what is in the x-axis categories
- dynamic threshold values in highchart - arearange
- finding the value in the series object and displaying in the tooltip of the high chart using angular 4
- Highcharts with multipe Series
- Highcharts column chart - transform columns manually after render
- sort chart bar by color with the correct value from the text file using HIGHCHART,PHP
- highcharts dynamic plotlines
- Highchart plotLines z Index between series z Index
- How to access class variable / methods in callback in Typescript?
- Customizing tooltip leaving the candle stick as it is
- Line chart Y axix value not show with single data
- Highlight multiple series in Highcharts
- How to use the tooltip formatter and still display chart color (like it does by default)?
- Showing HighCharts series name on x-axis and in legend
- Updating data points that have changed on invisble HighCharts series issue
- Setting a four hour range in highcharts
- Highcharts wrap processData on line charts doesn't draw right data points
- How to show the name of which slice is clicked in high chart-piechart