drag and zoom scatter plot in highcharts shiny R

Question

I'm trying to create a scatter plot in which I could be able to drag an area and see in a table the data from the dragged points as also as to zoom in that specific area.

After a research on the internet, I came to a solution with gglopt2 which works nice (presented next) and performs all the features I described.

Now I'm wondering if I could do the same using the highcharts package on shiny R. I searched on the internet but I found no solution to my problem. Could someone help me on this?

Thanks in advance

library(ggplot2)


server <- function(input, output, session) {

  # global variable, what type of plot interaction
  interaction_type <- "click"

  # observe for user interaction and change the global interaction_type
  # variable
  observeEvent(input$user_click, interaction_type <<- "click")
  observeEvent(input$user_brush, interaction_type <<- "brush")

  observeEvent(input$plot1_dblclick, {
    brush <- input$user_brush
    if (!is.null(brush)) {
      ranges$x <- c(brush$xmin, brush$xmax)
      ranges$y <- c(brush$ymin, brush$ymax)

    } else {
      ranges$x <- NULL
      ranges$y <- NULL
    }
  })



  output$plot <- renderPlot({
    ggplot(mtcars, aes(wt, mpg)) + geom_point()
  })

  # generate the data to put in the table
  dat <- reactive({

    user_brush <- input$user_brush
    user_click <- input$user_click

    if(interaction_type == "brush") res <- brushedPoints(mtcars, user_brush)
    if(interaction_type == "click") res <- nearPoints(mtcars, user_click, threshold = 10, maxpoints = 1)

    return(res)

  })

  output$table <- DT::renderDataTable(DT::datatable(dat()[,c("mpg", "cyl", "disp")]))

}


ui <- fluidPage(

  h3("Click or brush the plot and it will filter the table"),
  plotOutput("plot", click = "user_click", dblclick = "plot1_dblclick", brush = brushOpts(  id = "user_brush",   resetOnNew = TRUE       ) ),
  DT::dataTableOutput("table")

)

shinyApp(ui = ui, server = server)

Answer 1

You could add a simple wrapper that will allow panning in both vertical and horizontal ways. In afterSetExtremes events of axes you could get current extremes that could be passed to your table to filter data in the table.

Demo: http://jsfiddle.net/u9on8dbb/