Feature request: add functionality of synchronizer.js

[cvmartin]

Hi; thanks for making dygraphs happen; I am a big fan of the package, and I just posted an "issue" suggesting some CSS to make the legends look better (at least on my eyes).

I would like to have several dygraphs synchronized so when hovering one, the legends in all the graphs show the values for that point in time. It didn't take me long to see that the original JS library has a function synchronizer.js https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js that achieves this effect (example: http://dygraphs.com/tests/synchronize.html).

Dygraphs for R can synchonize the zooming of several dygraphs though dygraph(group = foo), but for what I understand, the underlying working of the synchornizer.js function is quite different. This one requires to access directly the Dygraph objects, and I think that cannot be done without manipulating the JS of the package?

It would be great to see this function implemented; depending also on how useful do you see it and the development time, of course.

[BerramouMohamed]

you can just use something like the follow to obtain a synchronized graphs ...

dy_graph <- list(

dygraphs::dygraph(series1, main = "title", group = "name", height = 230 ,width = "95%") %>% dyRangeSelector() %>% dyUnzoom() %>% dyOptions(drawGapEdgePoints = F, stepPlot = T, fillGraph = T, fillAlpha = 0.3 , colors = c("red", "blue","green","black","chocolate", "brown4", "darkorchid4"), rightGap = T, animatedZooms = T)%>% dyHighlight(highlightCircleSize = 5,
highlightSeriesBackgroundAlpha = 0.2, hideOnMouseOut = FALSE) %>% dySeries("Piece Presente", stepPlot = TRUE, color = "red") %>% dyGroup(c("AcquittementOutil", "chargementEffectuer"), drawPoints = TRUE, color = c("blue", "green")) ,

%>%

dyRibbon(data = ribbon, palette = c("#efefef", " #008000", "#E0FFFF"))

dygraphs::dygraph(series2, main = "title", group = "name", height = 230 ,width = "95%") %>% dyRangeSelector() %>% dyUnzoom() %>% dyOptions(drawGapEdgePoints = F, stepPlot = T, fillGraph = T, fillAlpha = 0.3 , colors = c("red", "blue","green","black","chocolate", "brown4", "darkorchid4"), rightGap = T, animatedZooms = T)%>% dyHighlight(highlightCircleSize = 5,
highlightSeriesBackgroundAlpha = 0.2, hideOnMouseOut = FALSE) ,

dygraphs::dygraph(series3, main = "title", group = "name", height = 230 ,width = "95%") %>% dyRangeSelector() %>% dyUnzoom() %>% dyOptions(drawGapEdgePoints = F, stepPlot = T, fillGraph = T, fillAlpha = 0.3 , colors = c("red", "blue","green","black","chocolate", "brown4", "darkorchid4"), rightGap = T, animatedZooms = T)%>% dyHighlight(highlightCircleSize = 5,
highlightSeriesBackgroundAlpha = 0.2, hideOnMouseOut = FALSE) ,

dygraphs::dygraph(series4, main = "title", group = "name", height = 230 ,width = "95%") %>% dyRangeSelector() %>% dyUnzoom() %>% dyOptions(drawGapEdgePoints = F, stepPlot = T, fillGraph = T, fillAlpha = 0.3 , colors = c("red", "blue","green","black","chocolate", "brown4", "darkorchid4"), rightGap = T, animatedZooms = T) %>% dyEvent(c("2019-06-13 14:13:47","2019-06-13 14:18:08", "2019-06-13 14:31:21","2019-06-13 14:59:23", "2019-06-13 16:05:09","2019-06-13 17:20:19", "2019-06-13 17:44:23","2019-06-13 18:11:15"), c("En prod", "En prod","En prod", "En prod","En prod","En prod", "En prod","En prod"), labelLoc = "top") %>% dyHighlight(highlightCircleSize = 5,
highlightSeriesBackgroundAlpha = 0.2, hideOnMouseOut = FALSE)

)

end list

render the dygraphs objects using htmltools

htmltools::browsable(htmltools::tagList(dy_graph))

[m1270]

Thank you @cvmartin for posting the thread and @BerramouMohamed for sharing his code. I am also looking for the same thing.

Just for the record, I created the chunk below from @BerramouMohamed codes with some minor modifications. Hopefully someone can make some modifications to this piece so that legend for both graphs are shown when the mouse hovers over any of them.

========================================

library(dygraphs) library(htmltools) library(data.table)

set.seed(123) df <- data.table(date = as.Date(15001:15100), series1 = sample(1:1000, 100), series2 = sample(3001:4000, 100)) %>% as.xts(.[2:5], .$date)

dy_graph <- list(

df %>% dygraph(main = "title1", group = "name", height = 430 ,width = "95%") %>% dyAxis("x", axisLabelFontSize = 0) %>% dyUnzoom() %>% dyOptions(drawGapEdgePoints = F, stepPlot = T, fillGraph = F, fillAlpha = 0.3 , colors = c("red", "blue","green","black","chocolate", "brown4", "darkorchid4"), rightGap = T, animatedZooms = T)%>% dySeries("series1", stepPlot = TRUE, color = "red") %>% dyGroup(c("series1", "series2"), drawPoints = TRUE, color = c("blue", "green")),

df %>% dygraph(main = "title2", group = "name", height = 230 ,width = "95%") %>% dyUnzoom() %>% dyRangeSelector() %>% dyOptions(drawGapEdgePoints = F, stepPlot = T, fillGraph = F, fillAlpha = 0.3 , colors = c("red", "blue","green","black","chocolate", "brown4", "darkorchid4"), rightGap = T, animatedZooms = T) %>% dyEvent(c("2011-04-13", "2011-02-13" , "2011-05-13" , "2011-04-23")) )

htmltools::browsable(htmltools::tagList(dy_graph))