Plain Dygraphs JavaScript options in R/Shiny

Question

Is there a way to use plain Dygraphs JavaScript options in R (and Shiny more in specific)?
http://dygraphs.com/options.html

I think the JS() function from the htmlwidgets package can be of use, but am not sure.

For example, I want to use highlightSeriesOpts (cf. first link) to highlight individual series in a dygraphs plot in order to display ONLY the selected series in the legend (and not all series at the same time by default). The lower 2 plots in the following link show exactly what is to be achieved:
http://dygraphs.com/gallery/#g/highlighted-series

A CSS solution has already been given ( i.e. .dygraph-legend {display: none;} and .dygraph-legend .highlight {display: inline;} ), but that somehow does not work in R/Shiny.

Anyhow, here is a conceptual script of mine. It does not work, but all advice is much appreciated.

ui <- fluidPage(

  sidebarLayout(
    sidebarPanel(),
    mainPanel(dygraphOutput("plot"))

  )

)

server <- function(input, output) {

  set.seed(123)
  data <- matrix(rnorm(12), ncol = 2)
  data <- ts(data)

  # Workaround for what might be a bug
  # Reference: http://stackoverflow.com/questions/28305610/use-dygraph-for-r-to-plot-xts-time-series-by-year-only
  data <- cbind(as.xts(data[,1]), as.xts(data[,2]))

  colnames(data) <- c("Series 1", "Series 2")
  #print(data) # Uncomment to view data frame

  # The logic of the following is that plain Dygraphs JavaScript
  # code can be used as plotting material
  output$plot <- JS("
                     new Dygraph(plot,
                                 data,
                                 { highlightSeriesOpts: {strokeWidth: 3} });

                     g.updateOptions({ highlightSeriesOpts: {strokeWidth: 3} });

                    ")

}

shinyApp(ui = ui, server = server)

I can't answer your question, but why not simply use https://rstudio.github.io/dygraphs/ ? — MLavoie, Mar 11 '16 at 19:05
I am already using the dygraphs package for R :). However, there is no convenient built-in feature to display only the highlighted series in the legend. CSS is required for this feature, but the provided CSS code on the dygraphs website somehow does not work in R/Shiny. Most likely it is being overwritten during execution. So is there any way to trace this? — i.p.freely, Mar 15 '16 at 10:54

timelyportfolio · Accepted Answer · 2016-03-11T23:17:21.053

The highlightSeriesOpts causes the highlighted series stroke to be bolder and does not affect the legend. You will still need the proper CSS to only show the closest series in the legend. To set the highlightSeriesOpts as you suggest, there is a clear example at http://rstudio.github.io/dygraphs/gallery-series-highlighting.html.

lungDeaths <- cbind(ldeaths, mdeaths, fdeaths)

dygraph(lungDeaths, main = "Deaths from Lung Disease (UK)") %>%
  dyHighlight(highlightSeriesOpts = list(strokeWidth = 3))

For a fuller answer in Shiny, we could do something like this.

library(shiny)
library(dygraphs)

lungDeaths <- cbind(ldeaths, mdeaths, fdeaths)

ui <- dygraph(lungDeaths, main = "Deaths from Lung Disease (UK)") %>%
  dyHighlight(highlightSeriesOpts = list(strokeWidth = 3)) %>%
  dyCSS(textConnection("
     .dygraph-legend > span { display: none; }
     .dygraph-legend > span.highlight { display: inline; }
  "))

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

}

shinyApp(ui,server)

Thank you! `.dygraph-legend > span {display:none;}` and `.dygraph-legend > span.highlight {display:inline;}` did the trick :). It is important to note that `> span` is necessary to make it work in R/Shiny. CSS code I found previously (cf. OP), did not mention this. — i.p.freely, Mar 15 '16 at 11:08

Plain Dygraphs JavaScript options in R/Shiny

1 Answers1

Linked