# Streaming graph from a static graph

**URL:** <https://community.plotly.com/t/streaming-graph-from-a-static-graph/8070>\
**Category:** plotly.js\
**Created:** [January 31, 2018, 9:32pm UTC](https://community.plotly.com/t/streaming-graph-from-a-static-graph/8070 "2018-01-31T21:32:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daifaityr234](https://avatars.discourse-cdn.com/v4/letter/d/ecccb3/32.png) [@Daifaityr234](https://community.plotly.com/u/Daifaityr234)\
**Post date:** [January 31, 2018, 9:32pm UTC](https://community.plotly.com/t/streaming-graph-from-a-static-graph/8070/1 "2018-01-31T21:32:53Z")

</div>

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:

```auto
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:

```auto
 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.”);  
}  
});  
}

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [February 1, 2018, 4:41pm UTC](https://community.plotly.com/t/streaming-graph-from-a-static-graph/8070/2 "2018-02-01T16:41:06Z")

</div>

Something like:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Daifaityr234](https://avatars.discourse-cdn.com/v4/letter/d/ecccb3/32.png) [@Daifaityr234](https://community.plotly.com/u/Daifaityr234)\
**Post date:** [February 2, 2018, 2:31am UTC](https://community.plotly.com/t/streaming-graph-from-a-static-graph/8070/3 "2018-02-02T02:31:44Z")

</div>

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