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
- Highcharts: Error bars in drill-down charts
- R Highcharts heatmap with motion, but motion bar is overlapping with x axis
- Sort of series values for xAxis
- highcharts exporting - Java approach, app-convert.properties
- Highcharts with angularjs drilled down does not work
- How to start lines on columns in HighCharts
- Highcharts xAxis with datetime not showing any chart
- How to fill data dynamically in Highchart
- Higcharts population pyramid with csv data
- Add showLoading() in Highstock
- Unable to read json data to draw a graph
- Hightcharts funnel plot. Labels outside of container are cropped
- Highcharts: reading data from a dictionary stored in a text file
- remove extra space/margin after navigator highstocks
- Spline chart tooltip only snaps on x-axis
- Format date string into highcharts
- Create entire highchart object on server side
- Dotnethighcharts library
- How to make highcharts tooltip show outside of the pie graph?
- Trying to append arrays to highcharts ( jquery)
- how I can get a static tooltip on a plotline, highstock?
- How can i create doughnut chart using oxyplot in xamarin.android?
- Build empty chart and then set it's data
- highchart connect nulls only when two values are close (aka by distance)
- HighChart Skipping the first point : Highcharts, Javascript
- Highcharts .update modifying original data array
- Stacked Bar Chart: Week vs Week
- Highcharts Series - want to show/hide all EXCEPT selected series (reversal of default logic)
- HTML Content to Javascript Code
- HighCharts alternating dual xaxis