plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Streaming in plotly.js

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

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

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

var cnt = 0;

var interval = setInterval(function() {

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

  if(cnt === 100) clearInterval(interval);
}, 300);
function rand() {
  return Math.random();
}

Plotly.plot('graph', [{
  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('graph', {
    y: [[rand()], [rand()]]
  }, [0, 1])

  if(cnt === 100) clearInterval(interval);
}, 300);
function rand() {
  return Math.random();
}

var time = new Date();

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


Plotly.plot('graph', data);

var cnt = 0;

var interval = setInterval(function() {

  var time = new Date();

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

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

  if(cnt === 100) clearInterval(interval);
}, 1000);
function rand() {
  return Math.random();
}

var time = new Date();

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

Plotly.plot('graph', 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('graph', minuteView);
  Plotly.extendTraces('graph', update, [0])

  if(cnt === 100) clearInterval(interval);
}, 1000);
var arrayLength = 30
var newArray = []

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

Plotly.plot('graph', [{
  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('graph', data_update)

  if(cnt === 100) clearInterval(interval);
}, 1000); 
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.plot('graph', data, layout);

var cnt = 0;

var interval = setInterval(function() {

  var time = new Date();

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

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

  if(cnt === 100) clearInterval(interval);
}, 1000);
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.