Implement zoom and reset functionality using action buttons in R shiny

Question

The given R script creates a tabPanel with four action buttons and a reactive scatterPlot from iris data. I want to enable functionality on other three buttons such that second button zooms in the plot, third button zooms-out and fourth button resets the selections done on the plot. I tried "zoom" package and zm() but not serving my purpose. Please help and thanks.

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
dashboardHeader(title = "Zoom and Reset Dashboard",titleWidth = 290),
dashboardSidebar(
width = 0
),
dashboardBody(
# Creation of tabs and tabsetPanel
tabsetPanel(type = "tab",
tabPanel("Resource Dashboard", 

                  fluidRow(
                       column(1,
                            tags$head(
                                tags$style(HTML('#buttonresfreqone:hover {
                                                background-color: #008CBA;
                                                color: #ffffff;
                                                width: 150%;
                                                }'))
                                                   ),
                              tags$br(actionButton("buttonresfreqone", 
"Activity",style="color: #000000; width:100%;height:50px; ")),
                              tags$br(),
                              tags$head(
                                tags$style(HTML('#buttonresfreqtwo:hover {
                                                background-color: #008CBA;
                                                color: #ffffff;
                                                width: 150%;
                                                }'))
                                                   ),
                              tags$br(actionButton("buttonresfreqtwo", 
"Zoom-In",style="color: #000000; width:100%;height:50px; ")),
                              tags$br(),
                              tags$head(
                                tags$style(HTML('#buttonresfreqthree:hover {
                                                background-color: #008CBA;
                                                color: #ffffff;
                                                width: 150%;
                                                }'))
                                                   ),
                              tags$br(actionButton("buttonresfreqthree", 
"Zoom-Out",style="color: #000000; width:100%;height:50px; ")),
                              tags$br(),
                              tags$head(
                                tags$style(HTML('#buttonresfreqfour:hover {
                                                background-color: #008CBA;
                                                color: #ffffff;
                                                width: 150%;
                                                }'))
                                                   ),
                              tags$br(actionButton("buttonresfreqfour", 
HTML("Reset"),
                                                   style="color: #000000; 
width:100%;height:50px;"))),
                       tags$br(),
                       column(10,

                              box(title = "Resource Frequency", status = 
"primary",height = "460",width = "550", solidHeader = T,
                                  plotOutput("res_freq_plot"))))
                     ),
                     id= "tabselected"
            )

                                ))

server <- function(input, output) { 

#Code for Resource Dashboard Resource Frequency Plots

values_res_freq <- reactiveValues(res_freq_one = 0, res_freq_two = 0, 
res_freq_three = 0, 
                                res_freq_four = 0, res_freq_five = 0)
observeEvent(input$buttonresfreqone, {
values_res_freq$res_freq_one <- 1
values_res_freq$res_freq_two <- 0
values_res_freq$res_freq_three <- 0
values_res_freq$res_freq_four <- 0
values_res_freq$res_freq_five <- 0

})
observeEvent(input$buttonresfreqtwo, {
values_res_freq$res_freq_one <- 0
values_res_freq$res_freq_two <- 1
values_res_freq$res_freq_three <- 0
values_res_freq$res_freq_four <- 0
values_res_freq$res_freq_five <- 0

})
observeEvent(input$buttonresfreqthree, {
values_res_freq$res_freq_one <- 0
values_res_freq$res_freq_two <- 0
values_res_freq$res_freq_three <- 1
values_res_freq$res_freq_four <- 0
values_res_freq$res_freq_five <- 0

})
observeEvent(input$buttonresfreqfour, {
values_res_freq$res_freq_one <- 0
values_res_freq$res_freq_two <- 0
values_res_freq$res_freq_three <- 0
values_res_freq$res_freq_four <- 1
values_res_freq$res_freq_five <- 0
})
output$res_freq_plot <- renderPlot(
{

    if(values_res_freq$res_freq_one)
    plot(iris$Sepal.Length)
  else
    return()

}

)
}
shinyApp(ui, server)

Maybe you could do something like [this](https://shiny.rstudio.com/gallery/plot-interaction-zoom.html) — SBista, Sep 15 '17 at 13:34
Hi, thanks a lot for replying, nice post but need this using action buttons only. Please help — Ashmin Kaul, Sep 15 '17 at 16:04
By zooming do you mean zooming into particular area in the plot or increasing the size of the plot? — SBista, Sep 15 '17 at 16:15
Clicking on zoom-in button, size of the plot should increase, clicking on zoom-out button, size should decrease, and clicking on reset button, I want to undo all selections.I have also added snapshot for your reference. Thanks — Ashmin Kaul, Sep 18 '17 at 05:16

score 0 · Accepted Answer · answered Sep 18 '17 at 09:36

0

You could give the height and width to the renderPlot function as suggested in this link.

The first step would be creating reactive values for height and width with the default values, then altering the height and width value as per requirement of the clicked button.

I have modified your server code to do exactly that. Hope it helps!

server <- function(input, output) { 

  #Code for Resource Dashboard Resource Frequency Plots

  values_res_freq <- reactiveValues(res_freq_one = 0, res_freq_two = 0, 
                                    res_freq_three = 0, 
                                    res_freq_four = 0, res_freq_five = 0)

  #Reactive values for height and width of the plot
  Val <- reactiveValues(height = 400, width = 600)


  observeEvent(input$buttonresfreqone, {#Activity
    values_res_freq$res_freq_one <- 1
    values_res_freq$res_freq_two <- 0
    values_res_freq$res_freq_three <- 0
    values_res_freq$res_freq_four <- 0
    values_res_freq$res_freq_five <- 0

  })
  observeEvent(input$buttonresfreqtwo, {#Zoom in
    values_res_freq$res_freq_one <- 0
    values_res_freq$res_freq_two <- 1
    values_res_freq$res_freq_three <- 0
    values_res_freq$res_freq_four <- 0
    values_res_freq$res_freq_five <- 0

    #Increase height and width 
    Val$height <- Val$height *1.25
    Val$width <- Val$width *1.25

  })
  observeEvent(input$buttonresfreqthree, {#Zoom out
    values_res_freq$res_freq_one <- 0
    values_res_freq$res_freq_two <- 0
    values_res_freq$res_freq_three <- 1
    values_res_freq$res_freq_four <- 0
    values_res_freq$res_freq_five <- 0

    #Decrease height and width 
    Val$height <- Val$height /1.25
    Val$width <- Val$width /1.25

  })
  observeEvent(input$buttonresfreqfour, {#Reset
    values_res_freq$res_freq_one <- 0
    values_res_freq$res_freq_two <- 0
    values_res_freq$res_freq_three <- 0
    values_res_freq$res_freq_four <- 1
    values_res_freq$res_freq_five <- 0

    #Set default value for height and width
    Val$height <- 400
    Val$width <- 600
  })

  observe({
    output$res_freq_plot <- renderPlot(
      {

        if(values_res_freq$res_freq_one)
          plot(iris$Sepal.Length)
        else
          return()

      }, height = Val$height, width = Val$width 

    )
  })


}

answered Sep 18 '17 at 09:36

SBista

7,479
1
27
58

Awesome, it's working very nicely, just one slight issue, When I click on zoom-in button, it only zooms a blank screen, then I have to click on the activity button again to make the enhanced plot appear. similar case for zoom-out. I should click on the zoom function and entire plot should get enhanced. Thank you and please help. – Ashmin Kaul Sep 18 '17 at 10:07
That's because of the condition that you put `if(values_res_freq$res_freq_one)` in the `renderPlot` function. If you set `values_res_freq$res_freq_one` to 1 instead of zero it should work. – SBista Sep 18 '17 at 10:09
Oh Thank you So So much, awsome help dear, great great help. – Ashmin Kaul Sep 18 '17 at 10:15
Hi SBista, regarding this discussion we had a little while back, I need one more help, your script helped me a lot,but I just want to implement a span functionality on the plot produced like clicking on the plot and moving it in any direction. If you can help me please with this. Thanks. – Ashmin Kaul Sep 22 '17 at 07:49
For panning you should consider using packages like `ggiraph`. – SBista Sep 22 '17 at 08:47
Sure, I'll check it, if you can provide me a good link with a working example, I can use it for reference, thanks. – Ashmin Kaul Sep 22 '17 at 09:09
You can check [this](https://rstudio-pubs-static.s3.amazonaws.com/221846_2ce0c17cc61740d7918ffa0c867ebf65.html) link. – SBista Sep 22 '17 at 09:13
Hmm, I see this is in accordance with the ggplot2 and plotly package. I know the span functionality that way. However, I just have a simple plot in R shiny by the command plot(iris$Sepal.Length). Just want to click on it and move. any easy way than that? – Ashmin Kaul Sep 22 '17 at 09:28
I guess you will need some amount of js code and won't be able to use simple `plotOutput` .You could try exploring the package `svgPanZoom` – SBista Sep 25 '17 at 06:39
Thank you so much, I'll check this package as per your suggestion and get back. – Ashmin Kaul Sep 26 '17 at 09:32

Implement zoom and reset functionality using action buttons in R shiny

1 Answers1