Alternative way to stream maxpoints property

plotly.js
1

I am currently streaming locally from a python server. I want to be able to keep 100 points (5s of data as I’m updating every 50ms) on the x axis while streaming across the axis. Right now I am limiting the stream by setting the 4th parameter of Plotly.extendTraces to 100, but is there a way to set the range of the x axis to dynamically update so a scrolling window of points in the stream is shown?

Code:

var msg;
var time = 0;
console.log("I'm here");
ws = new WebSocket("ws://localhost:9998");

ws.onmessage = function(evt)
{
if (evt.data =="-"){
msg = 0;
} else {
msg = evt.data;
}
time+=0.05;
// dataPoints = JSON.parse(msg);

}
var data = [{
x: [time],
y: [msg],
mode: ‘lines’,
line: {color: ‘#80CAF6’}
}]

var layout = {
title: ‘Streamed SPO2 values against Time (s)’,
xaxis: {
title: ‘Time (s)’,
showgrid: true,
zeroline: true,
showline: true,
mirror: ‘ticks’,
gridcolor: ‘#bdbdbd’,
gridwidth: 2,
zerolinecolor: ‘#969696’,
zerolinewidth: 3,
linecolor: ‘#636363’,
linewidth: 4
},
yaxis: {
title: “SPO2 %”,
showgrid: true,
zeroline: true,
showline: true,
mirror: ‘ticks’,
gridcolor: ‘#bdbdbd’,
gridwidth: 2,
zerolinecolor: ‘#969696’,
zerolinewidth: 3,
linecolor: ‘#636363’,
linewidth: 4,
range: [95,100]
},
}
Plotly.newPlot(‘Dashboard’, data,layout,{
displaylogo: false,
displayModeBar: true,
modeBarButtonsToRemove: [‘toImage’, ‘sendDataToCloud’],
modeBarButtonsToAdd: [{
name: ‘Download graph to png file’,
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: ‘Data graphs’,
format: ‘png’,
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}]
});

var cnt = 0;

var interval = setInterval(function() {

var update = {
x:  [[time]],
y: [[msg]]
}

Plotly.extendTraces('Dashboard', update, [0],100)

if(cnt === 100) clearInterval(interval);

}, 50);

2

you try calling Plotly.relayout('Dashboard', 'xaxis.autorange', true) after your extendTraces call or wait for us implementing https://github.com/plotly/plotly.js/issues/387