Are there any tutorials or examples for cubism.js + WebSocket?

Question

Are there any tutorials specifically about connecting WebSockets (or other non-polling data source) and cubism.js?

In particular, I'd like to be able to create a real time graph of data streaming from server, visually similar to example on the cubism page.

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

Answer 1

Here's something I'm toying with. It's not authoritative but it seems to work: https://gist.github.com/cuadue/6427101

When data comes in from the websocket, put it in a buffer. Pump the callbacks (I'll explain those below), sending the buffer as the argument. Check the return code for "success" or "wait for more data". Success means data was sent to cubism and we can remove this callback.

When cubism requests a frame of data, set up a callback which checks if the last point in the buffer is after the last point cubism requested. Otherwise, wait for more data.

If there's data to cover the stop of the requested frame, we'll fulfill this request. Without an API to request history, we have to drop data going into the past.

Then, just interpolate the buffer onto the cubism step size.

It seems like cubism requests data from the same point in time multiple times, so it's up to you how to prune your buffer. I don't think it's safe to just drop all data earlier than the requested start time.

Answer 2

I did a quick and dirty hack:

• Websocket fill a realTimeData array
• Cubism does the initial fetch from some Web services, then pull from realTimeData array

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

Note that cubism.js expects 6 points per fetch (cubism_metricOverlap) so make sure to keep 6 points in realTimeData