Dygraphs live trends и synchronization

Question

На моей странице есть два изображения. На регулярной основе новые временные ряды данных считываются из источника и записываются локальные переменные, то графики обновляются с помощью следующих команд:

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

Это работает прекрасно, графики показывают живую динамику, как и ожидалось. Однако, когда я пытаюсь синхронизировать два графика, включив syncrhonizer.js и с помощью следующей команды:

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

Затем «живые обновления» перестанет работать. Другими словами, график не отображает никаких новых входящих значений (он просто отображает один и тот же статический временной интервал). Синхронизация работает отлично, как для выбора, так и для увеличения.

Данные по-прежнему обновляются, но теперь мне нужно дважды щелкнуть по графику (или вручную панорамировать), чтобы увидеть самые последние данные.

У кого-нибудь есть идеи или рабочие решения для синхронности живых трендов с использованием Dygraphs?

Answer 1

Это рабочее решение, однако мне пришлось изменить «synchronizer.js» из dygraphs, поэтому комментарии и другие предложения по-прежнему приветствуются.

В функции attachZoomHandlers в synchronizer.js, я сделал это изменение:

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 
     }); 
    } 
} 

И в моем исходном коде, я сделал это изменение.

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; 

Кроме того, мне нужно, чтобы добавить это масштабирование функцию обратный вызов (по одному для каждого графа) для моего графика для живого тренда, чтобы начать при двойном щелчке после вручную увеличенных на графике (ов).

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; 
    } 
} 

Answer 2

Вам нужно явно задать dateWindow после обновления данных:

vm.graph1.updateOptions(
    { 'file': customData1, 'labels': vm.labels1 }); 
vm.graph2.updateOptions(
    { 'file': customData2, 'labels': vm.labels2 }); 
vm.graph1.updateOptions({ 
    dateWindow: vm.graph1.xAxisExtremes() 
}); 
// ^^^ this will synchronize the other charts, too 

Тот факт, что вы должны сделать это можно было бы считать баг с синхронизатора. Не стесняйтесь file an issue против диграфов, желательно со ссылкой на репродукцию через dygraphs.com/fiddle.