Streaming in JavaScript
How to create D3.js-based streaming plots in Plotly.js.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
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);
Click to copy
