var currentdate = new Date();
var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();
var trace1 = {
x: [time],
y: [0],
};
socket.once('temp', function(temp){
for (var i= 1; i < temp.length; i++) {
Plotly.addTraces(plotDiv,{x: [time],y: [0]});
};
});
if ( document.getElementById("threshold").value!='' && document.getElementById("threshold").value!=null) {
var data = [trace1];
Plotly.newPlot(plotDiv, data, layout);
var update2 = {
shapes: [
{
type: 'line',
x0: 0,
y0: threshold,
x1: points,
y1: threshold,
line: {
color: '#002B7F',
width: 4,
}
}
]
};
setInterval(function(){
socket.once('temp', function(temp){
var currentdate = new Date();
var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();
var update = {
x: [[time]],
y: [[temp[0]]]
};
Plotly.relayout(plotDiv, update2)
Plotly.extendTraces(plotDiv, update, [0], points);
});
}, seconds*1000);
plotDiv.on('plotly_click', function(data){
var pts = '';
for(var i=0; i < data.points.length; i++){
pts = 'x = '+data.points[i].x +'\ny = '+
data.points[i].y.toPrecision(6) + '\n\n';
}
alert('Data point clicked is located at:\n\n'+pts);
});
}
I have an array like [2,9,50,60], that I am getting from the backend that changes each time. I want to live plot this on the same graph using extend traces. In the first part of my code, I create enough traces on my plot that are needed based on the array I am receiving. For example, if the array I get back from the backend has 4 elements, I create 4 traces. Now I want to extend each trace by each element in the array.
Example- if array is temp[]=[2,9,50,60], with values changing each time. I want the first trace to be extended by temp[0], then second trace by temp[1], etc. Right now, I have trace1 being extended by temp[0] but need a way for the added traces to be extended? I can’t seem to figure it out
?