Display selected regions in synchronised plots

[danklotz]

Hi there.

In dygraphs js version it is possible to see the information of the selected mouse-over among the synchronized plots. See link. If I move my mouse over one graph I can also see the corresponding values within the other graphs.

Is there a way I can achieve this to? Maybe a workaround or a possibility to include such a thing in future updates?

[jjallaire]

We currently support synchronized zooming but not mouse over. Again, we'd entertain a PR but won't likely make this enhancement soon.

On Sun, Aug 28, 2016 at 7:14 AM, Daniel Klotz [email protected] wrote:

Hi there.

In dygraphs js version it is possible to see the information of the selected mouse-over among the synchronized plots. See link http://dygraphs.com/gallery/#g/synchronize. If I move my mouse over one graph I can also see the corresponding values within the other graphs.

Is there a way I can achieve this to? Maybe a workaround or a possibility to include such a thing in future updates?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/rstudio/dygraphs/issues/127, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGXxzPLKua3KnRE38bdcCb-jV270zbqks5qkW2KgaJpZM4Ju5n2 .

[ijlyttle]

I have been looking for this capability, as well.

Just to note that this seems linked to #116 and #53.

I have spent a while looking at this - I think I have an idea, but I can't quite get it to work.

Lets say that we have two dygraphs that we want to synchronize in this way. My idea is to:

• use the synchronizer.js function. I think an htmltools::htmlDependency() might be the way to go, but that's a different part to figure out. htmltools::includeScript() might work for now.

• use the elementId option within the dygraphs::dygraph() function, so that we can identify those dygraphs that we wish to sync. For example:

dygraph(..., elementId = "element_g1")
dygraph(..., elementId = "element_g2")

• The next trick is to get the dygraphs associated with these elements. This seems to be the motivation for introducing the elementId option. Following the suggestion from the NEWS file (see 1.1.1.0 release), following code might be wrapped in htmltools::tags$script():

var g1 = HTMLWidgets.getInstance(document.getElementById('element_g1')).dygraph
var g2 = HTMLWidgets.getInstance(document.getElementById('element_g2')).dygraph

• Joining a set of dygraphs together to be synchronized seems to be a matter of running a bit of custom javascript code once you have put the operative dygraphs into [g1, g2]. The following code might be wrapped in htmltools::tags$script():

 var sync = Dygraph.synchronize([g1, g2], {
    selection: true,
    zoom: true
 });

Right now, I can make a dygraph (using elementId = "element_g1"), and I can find the element using document.getElementById('element_g1'), and write that to the console. Where I have a problem (right now) is that the HTMLWidgets.getInstance() method returns undefined when I print it to the console - I cannot even get to the dygraph.

To be clear, to begin, I want just to be able to hack things together. A clean solution, involving functions and possibly the group option for dygraphs::dygraph() - although that would be very welcome, can remain as a following step.

---

Here's some code you can use in an Rmd code-block to reproduce the "undefined" problem:

library("dygraphs")
library("htmltools")

dygraph(mdeaths, elementId = "mdeaths")

tags$script("
  var elem = document.getElementById('mdeaths');
  var dyg = HTMLWidgets.getInstance(elem);
  
  console.log(elem);
  console.log(dyg);
")

At this point I don't know if I'm doing something wrong or if there is a problem on the dygraphs end. Any illumination would be greatly appreciated. Thanks!

[danklotz]

Hm... also tried to play around with this issue but could not come up with anything fruitful.

Any new on this? :/