Czy są jakieś tutoriale lub przykłady dla cubism.js + WebSocket?

Question

Czy są jakieś tutoriale dotyczące podłączania WebSockets (lub innych źródeł danych niepolnych) i cubism.js?

W szczególności chciałbym móc stworzyć wykres w czasie rzeczywistym strumieniowania danych z serwera, wizualnie podobny do przykładu na cubism page.

Referencje: - https://github.com/square/cubism/issues/5 - http://xaranke.github.io/articles/cubism-intro/ - Using Other Data Sources for cubism.js

Answer 1

Oto coś jestem bawiąc. Nie jest autorytatywne, ale wydaje się działać: https://gist.github.com/cuadue/6427101

Gdy dane pochodzą z websocket, umieść go w buforze. Pompuj wywołania zwrotne (wyjaśnię to poniżej), wysyłając bufor jako argument. Sprawdź kod powrotu "sukces" lub "poczekaj na więcej danych". Sukces oznacza, że ​​dane zostały wysłane do kubizmu i możemy usunąć to wywołanie zwrotne.

Gdy kubizm żąda ramki danych, skonfiguruj wywołanie zwrotne, które sprawdza, czy ostatni punkt w buforze jest po ostatnim kubizmie żądanym. W przeciwnym razie poczekaj na więcej danych.

Jeśli istnieją dane dotyczące zatrzymania żądanej ramki, spełnimy tę prośbę. Bez interfejsu API do żądania historii, musimy upuścić dane z przeszłości.

Następnie, po prostu interpoluj bufor do rozmiaru kroku kubizmu.

Wygląda na to, że kubizm żąda danych z tego samego punktu w czasie wiele razy, więc od ciebie zależy, jak wyczyścić bufor. Nie sądzę, że bezpieczne jest po prostu upuścić wszystkie dane wcześniej niż żądany czas rozpoczęcia.

Answer 2

Zrobiłem szybki i brudny Hack:

• websocket wypełnić tablicę realTimeData
• Kubizm ma wstępne pobieranie z niektórych usług internetowych, a następnie wyciągnąć z realTimeData tablicy

 

    var firstTime = true; 
    context.metric(function(start, stop, step, callback) { 
     if (firstTime) { 
     firstTime = false; 
     d3.json("... { 
      var historicalData = []; 
      callback(null, historicalData); 
     } 
     } else { 
     callback(null, realTimeData); 
     } 
 

Zauważ, że cubism.js spodziewa się 6 punktów na pobranie (cubism_metricOverlap), więc pamiętaj, aby zachować 6 punktów w realTimeData