Streaming in JavaScript

How to create D3.js-based streaming plots in Plotly.js.

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

Basic Streaming

function rand() {
  return Math.random();
}

Plotly.newPlot('myDiv', [{
  y: [1,2,3].map(rand),
  mode: 'lines',
  line: {color: '#80CAF6'}
}]);

var cnt = 0;

var interval = setInterval(function() {

  Plotly.extendTraces('myDiv', {
    y: [[rand()]]
  }, [0])

  if(++cnt === 100) clearInterval(interval);
}, 300);

Multiple Traces

function rand() {
  return Math.random();
}

Plotly.newPlot('myDiv', [{
  y: [1,2,3].map(rand),
  mode: 'lines',
  line: {color: '#80CAF6'}
}, {
  y: [1,2,3].map(rand),
  mode: 'lines',
  line: {color: '#DF56F1'}
}]);

var cnt = 0;

var interval = setInterval(function() {

  Plotly.extendTraces('myDiv', {
    y: [[rand()], [rand()]]
  }, [0, 1])

  if(++cnt === 100) clearInterval(interval);
}, 300);

Streaming with Timestamp

function rand() {
  return Math.random();
}

var time = new Date();

var data = [{
  x: [time],
  y: [rand()],
  mode: 'lines',
  line: {color: '#80CAF6'}
}]


Plotly.newPlot('myDiv', data);

var cnt = 0;

var interval = setInterval(function() {

  var time = new Date();

  var update = {
  x:  [[time]],
  y: [[rand()]]
  }

  Plotly.extendTraces('myDiv', update, [0])

  if(++cnt === 100) clearInterval(interval);
}, 1000);

Extend Traces & Relayout

function rand() {
  return Math.random();
}

var time = new Date();

var data = [{
  x: [time],
  y: [rand],
  mode: 'lines',
  line: {color: '#80CAF6'}
}]

Plotly.newPlot('myDiv', data);

var cnt = 0;

var interval = setInterval(function() {

  var time = new Date();

  var update = {
  x:  [[time]],
  y: [[rand()]]
  }

  var olderTime = time.setMinutes(time.getMinutes() - 1);
  var futureTime = time.setMinutes(time.getMinutes() + 1);

  var minuteView = {
        xaxis: {
          type: 'date',
          range: [olderTime,futureTime]
        }
      };

  Plotly.relayout('myDiv', minuteView);
  Plotly.extendTraces('myDiv', update, [0])

  if(++cnt === 100) clearInterval(interval);
}, 1000);

30 Points Using Update

var arrayLength = 30
var newArray = []

for(var i = 0; i < arrayLength; i++) {
  var y = Math.round(Math.random()*10) + 1
  newArray[i] = y
}

Plotly.newPlot('myDiv', [{
  y: newArray,
  mode: 'lines',
  line: {color: '#80CAF6'}
}]);

var cnt = 0;

var interval = setInterval(function() {

  var y = Math.round(Math.random()*10) + 1
  newArray = newArray.concat(y)
  newArray.splice(0, 1)

  var data_update = {
    y: [newArray]
  };

  Plotly.update('myDiv', data_update)

  if(++cnt === 100) clearInterval(interval);
}, 1000);

Streaming Subplots

function rand() {
  return Math.random();
}

var time = new Date();

var trace1 = {
  x: [],
  y: [],
  mode: 'lines',
  line: {
    color: '#80CAF6',
    shape: 'spline'
  }
}

var trace2 = {
  x: [],
  y: [],
  xaxis: 'x2',
  yaxis: 'y2',
  mode: 'lines',
  line: {color: '#DF56F1'}
};

var layout = {
  xaxis: {
    type: 'date',
    domain: [0, 1],
    showticklabels: false
  },
  yaxis: {domain: [0.6,1]},
  xaxis2: {
    type: 'date',
    anchor: 'y2',
    domain: [0, 1]
  },
  yaxis2: {
    anchor: 'x2',
    domain: [0, 0.4]},
}

var data = [trace1,trace2];

Plotly.newPlot('myDiv', data, layout);

var cnt = 0;

var interval = setInterval(function() {

  var time = new Date();

  var update = {
    x: [[time], [time]],
    y: [[rand()], [rand()]]
  }

  Plotly.extendTraces('myDiv', update, [0,1])

  if(++cnt === 100) clearInterval(interval);
}, 1000);