Two `dygraphs` with synchronized crosshair

Question

I have implemented two dygraphs with custom option verticalCrosshair : true here:

https://rawgit.com/danielkrizian/dygraphs/master/tests/synchronize-Crosshair.html

When I hover over any of the graphs at a particular x point, I want all graphs to display the vertical crosshair at that point. So far I've been able to get this working on the top graph (gs[0]) like this:

highlightCallback: function(e, x, pts, row) {
  var sel = gs[0].getSelection();
  gs[1].setSelection(sel);
},

Nothing happens when I hover over the bottom graph. How to generalize it with for loop over all graphs?

Answer 1

You should put the dygraphs objects in an array and loop over it in your highlightCallback, updating the selection in all the dygraphs other than the one generating the event.

One complication is that highlightCallback doesn't get the dygraph object as a parameter. This is an oversight in the API which I hope to fix in dygraphs 2.0. You can work around it by capturing the relevant Dygraph object in a closure when you set highlightCallback.

See the synchronize demo for some inspiration.

Answer 2

I've solved this with:

highlightCallback: function(e, x, pts, row) {
  for (var j = 0; j < gs.length; j++) {
    gs[j].setSelection(row);
  }
},

See the graphs and source at:

https://rawgit.com/danielkrizian/dygraphs/master/tests/synchronize-Crosshair.html

Answer 3

I have had both of these features up and working for nearly a year. I didn't originate the code, but just did just some editing in an effort to get the labelFollow bit working the way that I liked. I followed the original author(s) and stuffed the code in the library, not in a mere callback in a Dygraph() options argument, but I did not put the verticalCrosshair snippets in a plug-in as I don't know how to write those yet. However, the labelFollow stuff is in the plug-in legend.js, as that's what the original author had done.

As for the code for the verticalCrosshair option, I got it from the apparently esteemable DJCOMXA--- http://www.pixeltradr.com/dygraphs/dygraph.js. Just search for "verticalCrosshair" and you'll find where two tiny snippets have been added to that script.

To complete the verticalCrosshair option it's necessary of course to also add to dygraph-options-reference.js as follows:

  // Credit due to DJCOMXA.
 "verticalCrosshair": {
    "default": "false",
    "labels": ["Interactive Elements"],
    "type": "boolean",
    "description": "Shows vertical line on highlighted point."
  },

Now for the other matter of the labelFollow, for proof of prior work on labelFollow it suffices to go to the Google group. You can then click on the link at the very bottom of that page to see a graph that shows both the verticalCrosshair and the labelFollow (the latter being, I believe, the work of "wootwoot" who I more or less copied). Similarly, replace "synchronize-Charts" in that URL for that graph with "customLabel_Crosshair" and you'll be taken to a prettier example (I think that I'm limited as to the number of links that I can provide, hence the URL re-construction instructions).

I can't now figure out how I got the original labelFollow code. Whatever, I found some modifications to legend.js (and of course dygraph-options-reference.js) by wootwoot and edited them.

I must say that I wrote to danvdk at the gmail address that he provided at the top of dygraph.js, to suggest the utility of these changes, and it was bounced as I was not a member of the club.

Regarding taking inspiration from the Dygraphs sychronization example (the "synchronize demo" link that danvk provided), take your inspiration from it cautiously. Right now it's giving me fits.

Try this: upon page load go to any of the four graphs and in the middle at a skinny section do a zoom in (click drag from left to right); then double-click.

What happened? You zoomed in and the traces filled the graph vertically, but for a little bit of padding--- automatic scaling. And then upon zooming out with the double-click everything appeared to be as before. Ahh... but it isn't. Now move to any OTHER of the four graphs and repeat the first step... zoom in at a the same skinny spot (the data happen to be the same for each of these graphs). Notice that the automatic vertical scaling is missing. And that's a permanent condition until you reload the page.