score:0
While the drilldown feature of highcharter is useful, when you have data in every state, it would require loading the map for each underlying state at render. An approach I have taken is to essentially switch between plotting the state map and a county map as follows.
## Library
library(shiny)
library(shinyjs)
library(dplyr)
library(highcharter)
library(stringr)
## Load maps at start for speed
maps <- sapply(
X = c("us-all", "us-tx-all"),
simplify = FALSE,
FUN = function(x) { highcharter::download_map_data(paste0("countries/us/", x)) }
)
ui <- shiny::fluidPage(
shinyjs::useShinyjs(),
highcharter::highchartOutput(outputId = "map"),
shiny::uiOutput(outputId = "ui")
)
server <- function(input, output, session) {
## USA map with just TX as example
state_map <- shiny::reactive({
highcharter::highchart() %>%
highcharter::hc_add_series_map(
map = maps[["us-all"]],
df = data.frame(state_abbr = c("TX"), y = c(10)),
joinBy = c("postal-code", "state_abbr"),
value = "y"
) %>%
highcharter::hc_plotOptions(
series = list(
allowPointSelect = TRUE,
events = list(
click = htmlwidgets::JS(
"function(event) {
Shiny.setInputValue(
'geo_click',
event.point.state_abbr,
{priority: 'event'}
);
}"
)
)
)
)
})
## County map
county_map <- shiny::reactive({
highcharter::highchart() %>%
highcharter::hc_add_series_map(
map = maps[[paste0("us-", stringr::str_to_lower(input$geo_click), "-all")]],
df = data.frame(city = c("Gray", "Leon", "Lamb", "Duval"), y = c(1, 4, 2, 3)),
joinBy = c("name", "city"),
value = "y"
)
})
## Set to state map at outset
output$map <- highcharter::renderHighchart({ state_map() })
## If state clicked, add button to go back to state map
output$ui <- shiny::renderUI({
if (!is.null(input$geo_click)) {
shiny::actionButton(
inputId = "geo_button",
label = "Return to USA Map"
)
}
})
## If button clicked, reset input, hide button, and go back to state map
shiny::observeEvent(
eventExpr = input$geo_button,
handlerExpr = {
output$map <- highcharter::renderHighchart({ state_map() })
shinyjs::hide(id = "geo_button")
}
)
## If state clicked, go to county map and show button
shiny::observeEvent(
eventExpr = input$geo_click,
handlerExpr = {
output$map <- highcharter::renderHighchart({ county_map() })
shinyjs::show(id = "geo_button")
}
)
}
shiny::shinyApp(ui = ui, server = server)
Source: stackoverflow.com
Related Query
- Drilldown United states city/county map from states using highcharter
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- R Highcharter map from customized shapefile
- Highcharts - Highcharter in R - Getting Tooltip values from df rather than map
- Problem in plotting a map graph using highcharter
- Drilldown to multiple series from different groups - Highcharter (in R)
- Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
- Highcharts Maps Drilldown Map From geojson
- dynamically generating json from json for highcharts heap map chart using ajax
- multiple Drilldown in Highcharts using values from database in ruby on rails
- Scraping data from Highcharts using selenium
- Optimize JavaScript DrillDown code
- Customize bubble map with highcharter
- getting error#17 from highcharts while using solid gauge from backbone rails
- Loading Highcharts series from XML using jQuery
- Changing X axis type from category to datetime on drilldown
- drilldown maps and funnell charts on the same page using highcharts
- Issues using highcharts node export server from ClojureScript - "0x03 error when performing chart generation"
- Highcharter Map with Categorical Variables in R
- plotOptions.series.point.events returns null point data when using a drilldown
- developing interactive app using shiny and highcharter
- How to draw a bubble map with longitude and latitude using Highcharts in react
- Highchart does not load data from hidden input when using .val
- Using the DotNet.HighCharts Library To Create Chart Based on DataTable Result From Webservice
- How to get month name from ISO date using moment js
- Using PieChart from highcharts-react-official
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- How to place highcharter objects at same horizontal level using rmarkdown?
- Highcharts xAxis shows labels from drilldown on drillup
- Plot inside a loop using highcharter
More Query from same tag
- Parsing to milliseconds changes date
- Create Density Heatmap Chart using Jquery with array of data
- Vue Highcharts display graph for each user after routing
- Add vertical(projection) line from point to categories, highcharts
- Highchart Annotation Connector
- highcharts include multiple charts in foreach
- Add additional data to tooltip in iOS which does not belongs to x&y-axis of graph
- highcharts display in my render html page which i want to convert into PDF using wkhtmltopdf in rails
- Highcharts - Changing color of text if not enough room on bar graph
- Uncaught TypeError: Object [object Object] has no method 'highcharts'
- Highchart crashing with multiple Y axis
- Difference between setExtremes and afterSetExtremes in HighStock
- Highcharts, how to get data from array on same js page instead of external JSON
- Highcharts - Trying to get a dyamic spline to update from left to right
- Highcharts Zoom to last 1000 points
- How do I set Highcharts categories dynamically?
- Highcharts NG stockchart animation effect only on navigator Type: column
- Highcharts - how to position values closer to the Y axis
- Change color of Multibar chart in Django
- Inject a CSS class into HighCharts
- how to to consolidate xml data in jquery?
- Currency formate REGEXP, change symbol
- How to make this code more simple or shorten?
- Highcharts - Updating a chart's option after initial render
- Pie chart -custom event for legendItemClick-highchart
- How to set the width within axis label in highcharts
- how create chart with highcharts.js and call ajax?
- Can I use different if-conditions in Highstock-code?
- Hide/show all series in Highcharts?
- Change Y Axis vertical line color in Highcharts