Streaming graph from a static graph

Hi

I am trying to make a group of six static graphs of 100 points plotted on one graph, and then gradually remove the points in a FIFO manner by plotting streamed values. So basically here is the data for the graphs:

for (var i = 0; i < traceNames.length; i++) {
    data.push({
      x: [time],
      y: [streamBuffer[traceNames[i]]],
      name: traceNames[i],
      xaxis: "x" + i,
      yaxis: "y" + i,
      type: "line+markers",
      connectgaps: true
    });
  }

And here is the streaming plot part:

 plotGraph("Statistics", data, layout);

  if (bool) {
    var interval = setInterval(function () {
      var update = {
        x: [
          [time],
          [time],
          [time],
          [time],
          [time],
          [time]
        ],
        y: [
          [boxData["pressure"]],
          [boxData["pi"]],
          [boxData["co2"]],
          [boxData["pulse"]],
          [boxData["temperature"]],
          [boxData["fspo2"]]
        ]
      };
      Plotly.extendTraces("Statistics", update, [0, 1, 2, 3, 4, 5], 100);
      Plotly.relayout("Statistics", "xaxis.autorange", true);
      if (!streamToggle) {
        streamMode = false;
        checkStream();
        $("#loop").stop();
        clearInterval(interval);
      }
    }, 50);
  }
}

Basically I want the graph to be plotted first, and then the graph will update using extendTraces. Any ideas?

PS: Tried to use promises but it didn’t work…

var promise = new Promise(function(resolve, reject) {
var bool = plotGraph(“Statistics”, data, layout);
if (bool) {
plotStream(bool, boxData);
}
else {
console.log(“What a fail.”);
}
});
}

Something like:

function delay() {
  return new Promise(function(resolve) {
    setTimeout(resolve, 1000)
  })
}

Plotly.newPlot('graph', data, layout)
  .then(delay)
  .then(function() {
    // your streaming logic
  })

should get you close.

1 Like

Actually don’t worry I managed to solve it… It was a small bug…