CODEWITHSUNDEEP
rshinydygraphs
sechstein
sechstein

Reputation: 306

Second Y axis for synchronised dygraphs in Shiny

I have a shiny app with two synchronised dygraphs. The upper one with one Y axis and the bottom one with two Y axis.

The problem is that the second Y axis takes up space in a div. So the dates are no longer below one another. I tried to modify the length of the upper dygraph, but then it doesn't work if the size of the screen changes (since the app is responsive). I tried to use dyCSS but with no result.

Is there a way, without adding a second Y axis on the upper dygraph, to keep the suitable space on the right of it? Or to delete the div of the second Y axis of the bottom graph ?

Thank you for any help.

A picture of the problem:

enter image description here

Here is the reproducible example:

ui.R

library(dygraphs)

shinyUI(fluidPage(
    dygraphOutput("dygraph1"),
    dygraphOutput("dygraph2")
    )
)

server.R

library(dygraphs)
library(datasets)

shinyServer(function(input, output) {

    lungDeaths <- cbind(mdeaths, fdeaths)

    output$dygraph1 <- renderDygraph({
        dygraph(ldeaths, main = "Male", group = "lung-deaths")
    })

    output$dygraph2 <- renderDygraph({
        dygraph(lungDeaths, main = "All", group = "lung-deaths") %>%
            dySeries("fdeaths", axis = "y2")
    })
})

Upvotes: 0

Views: 1735

Answers (1)

RmIu
RmIu

Reputation: 4467

This is not the most elegant solution but you can use jQuery to hide a second axis.

library(dygraphs)

ui <- shinyUI(fluidPage(
  tags$head(
    tags$script(
      HTML("
        Shiny.addCustomMessageHandler ('hideAxis',function (val) {
          hideAxis();
        });
        function hideAxis(){
          $('#dygraph1').find('.dygraph-axis-label-y2').hide();
        }
           ")
    )
  ),
  dygraphOutput("dygraph1"),
  dygraphOutput("dygraph2")
)
)

library(dygraphs)
library(datasets)

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

  lungDeaths <- cbind(mdeaths, fdeaths)
  ldeaths2   <- cbind(ldeaths, ldeaths)
  colnames(ldeaths2) <- c("ldeaths","ldeaths2")


  output$dygraph1 <- renderDygraph({
    reactiveTimer(50,{session$sendCustomMessage (type="hideAxis", 1)})

    dygraph(ldeaths2, main = "Male", group = "lung-deaths") %>%
      dySeries("ldeaths2", axis = "y2") %>%
      dyCallbacks(zoomCallback = "function(){$('#dygraph1').find('.dygraph-axis-label-y2').hide();}") 
  })

  output$dygraph2 <- renderDygraph({
    dygraph(lungDeaths, main = "All", group = "lung-deaths") %>%
      dySeries("fdeaths", axis = "y2")
  })


})

shinyApp(ui=ui, server=server)

Edit

As danvk sugested the `rightGap? option can be used to create a neatersolution, like:

library(dygraphs)

ui <- shinyUI(fluidPage(
  dygraphOutput("dygraph1"),
  dygraphOutput("dygraph2")
)
)

library(dygraphs)
library(datasets)

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

  lungDeaths <- cbind(mdeaths, fdeaths)

  output$dygraph1 <- renderDygraph({
    dygraph(ldeaths, main = "Male", group = "lung-deaths") %>%
      dyOptions(axisLabelWidth=80, rightGap = 90)
  })
  output$dygraph2 <- renderDygraph({
    dygraph(lungDeaths, main = "All", group = "lung-deaths") %>%
      dySeries("fdeaths", axis = "y2") %>%
      dyOptions(axisLabelWidth=80)
  })
})

shinyApp(ui=ui, server=server)

Here axislabelWidth and the rightGap options is set to align the plots.

Upvotes: 1

Related Questions