Dygraphs live trending and synchronization

Question

There are two dygraphs on my page. On regular intervals new time series data is read from source and written to local variables, then the graphs are updated using the following commands:

    vm.graph1.updateOptions(
      { 'file': customData1, 'labels': vm.labels1 });
    vm.graph2.updateOptions(
      { 'file': customData2, 'labels': vm.labels2 });

This works perfectly fine, the graphs show the live trend as expected. However, when I try to synchronize the two graphs by including the syncrhonizer.js and using the following command:

vm.graphSync = Dygraph.synchronize(vm.graph1, vm.graph2);

Then the "live updates" stop working. In other words, the graph doesn't display any of the new incoming values (it just displays the same static time span). The syncronization works fine, both for selection and zoom.

The data is still getting updated, but now I have to double click on the graph (or manually pan) in order to see the most recent data.

Anyone have any ideas or working solutions for syncrhronizing live trends using Dygraphs?

Answer 1

This is a working solution, however, I had to change the "synchronizer.js" from dygraphs, so comments and other suggestions are still welcome.

In attachZoomHandlers function in synchronizer.js, I made this change:

for (var j = 0; j < gs.length; j++) {
    if (gs[j] == me) continue;

    //added if/else block, the original code was the stuff inside else block
    if (me.ignoreXrangeSync && me.ignoreXrangeSync === true) {
        //if ignoreXrangeSync flag is set, only update y-range
        gs[j].updateOptions( {
           valueRange: yrange
       });
    }
    else {
      //if ignoreXrangeSync flag is NOT set, run original code (so manual zoom works)
      gs[j].updateOptions( {
         dateWindow: range,
         valueRange: yrange
      });
   }
}

And in my original code, I made this change.

vm.graph1.ignoreXrangeSync = vm.graph2.ignoreXrangeSync = true;
vm.graph1.updateOptions(
      { 'file': customData1, 'labels': vm.labels1 });
vm.graph2.updateOptions(
      { 'file': customData2, 'labels': vm.labels2 });
vm.graph1.ignoreXrangeSync = vm.graph2.ignoreXrangeSync = false;

Also, I needed to add these zoom callbacks (one for each graph) for my graph for live trending to start when double clicking after having manually zoomed in the graph(s).

var graph1ZoomCallback = function () {   //callback for graph1
    if(!vm.graph1.isZoomed()) {          //if graph1 has been double clicked
      vm.graph2.ignoreXrangeSync = true; //note, graph2
      vm.graph2.resetZoom();
      vm.graph2.ignoreXrangeSync = false;
    }
}