(Solved!) Synchronize dyCrosshair and selection across multiple graphs in dygraphs for R

[m1270]

Hi,

In R when multiple dygraphs are synchronized, only the zoom option will be synchronized not the crosshair/legend.

I have noticed that Dan Vanderkam, the author of the dygraphs package has provided a solution in javascript in here. Sadly, I am not familiar with javascript so I am wondering if there is a way to apply this solution in R.

Thank you.

Here is an example:

----------------------------------------------------------------------------------

library(dplyr) library(data.table) library(xts) library(dygraphs) library(lubridate) library(htmltools)

dt1 <- data.table(date = as_date((Sys.Date() - 99): Sys.Date()), value1 = runif(100), value2 = runif(100)) %>% as.xts()

pl1 <- dygraph(dt1[,"value1"], main = "first", group = "gr1", width = "100%", height = "48vh") %>% dyCrosshair(direction = "vertical") %>% dyOptions(stepPlot = TRUE, colors = "purple")

pl2 <- dygraph(dt1[,"value2"], main = "second", group = "gr1", width = "100%", height = "48vh") %>% dyCrosshair(direction = "vertical") %>% dyOptions(stepPlot = TRUE, colors = "green") %>% dyRangeSelector()

browsable( tagList( pl1, pl2 ) )

[m1270]

After searching the web I found a solution given by @prise6 in here. I am rewriting the solution in here for those who need.

step1: I downloaded "synchronizer.js' from here and saved it under the same name with .js extension in my working directory

step2: I changed line 218 to this: var idx = gs[i].findClosestRow(gs[i].toDomXCoord(x)); and saved the file

here is the previous example ==================

library(dplyr) library(data.table) library(xts) library(dygraphs) library(lubridate) library(htmltools) library(htmlwidgets)

dt1 <- data.table(date = as_date((Sys.Date() - 99): Sys.Date()), value1 = runif(100), value2 = runif(100)) %>% as.xts()

pl1 <- dygraph(dt1[,"value1"], main = "first", elementId ="graph1", group = "gr1", width = "100%", height = "48vh") %>% dyCrosshair(direction = "vertical") %>% dyOptions(stepPlot = TRUE, colors = "purple")

pl2 <- dygraph(dt1[,"value2"], main = "second", elementId ="graph2", group = "gr1", width = "100%", height = "48vh") %>% dyCrosshair(direction = "vertical") %>% dyOptions(stepPlot = TRUE, colors = "green") %>% dyRangeSelector()

browsable( tagList( pl1, pl2,

htmlDependency(name = "synchronizeDygraph", src = file.path(getwd()), script = "synchronizer.js", version = "1.1.1"), tags$script( " var dygraphsCollection; var dygraphSync;

  setTimeout(
    function() {
      dygraphsCollection = HTMLWidgets.findAll('.dygraphs').map(function(o){return(o.dygraph)});
      dygraphSync = Dygraph.synchronize(dygraphsCollection, {selection : true, range : false});
    }, 50
  )
  "
)

) )

[m1270]

Thank you @prise6