Black Lives Matter. Please consider donating to Black Girls Code today.

Extend Traces Connecting Back to Beginning

Please note that I am a JS noob. I am streaming sensor data in via a websocket. The sensor is collecting data every second, but is transmitting the data in 1 minute batches. I have parsed the JSON and have the data pushing into two arrays, timeStamp and pressure, respectively. My chart is “working.” It’s plotting every point in the array, but after each subsequent batch/array is appended, there is a line being drawn from the end of that array to the first point in the plot. Any help would be very much appreciated.

Below is my JS:

//Connect to Websocket
  var exampleSocket = new WebSocket("ws://XXXX",["XXXX"]);
  
  exampleSocket.addEventListener('open', function (event) {
    console.log('Hello Server!');
    exampleSocket.send('{"message":"AddRequests","requests":[{"uri":"Server:XXXX_Pressure","mode":"most-recent","p1":"1","p2":"","transaction":1,"order":"collected"}]}');
  });
//Create Arrays to Store data in  
var timeStamp = [];
var pressure = [];  
//Function to extract data from JSON messages and append to arrays
function extractData (message)  {
    message.forEach(function(element) {
        timeStamp.push(element.time);
        pressure.push(element.vals[0]);
    });
};
//On Message, append data to the plot
exampleSocket.addEventListener('message', function (mEvent) {

     extractData(JSON.parse(mEvent.data).records.data);
     console.log(pressure);
     console.log(timeStamp)

  })
//Plotly
psi_graph = document.getElementById('psiGraph');

var data = [{
  x: [timeStamp],
  y: [pressure],
  mode: 'lines',
  line: {color: 'red'}
}]


Plotly.plot(psi_graph, data);

var cnt = 0;

var interval = setInterval(function() {
    
  var update = {
  x:  [timeStamp],
  y: [pressure]
  }

  Plotly.extendTraces(psi_graph, update, [0])

}, 1000);

Picture of the issue:

Picture of the Array from Chrome Console:

Nothing seems wrong when looking at the code snippet you pasted above. Can you confirm that your data does not connect back to the beginning by itself? To do so:

var gd = document.getElementById(/* id of your graph div */)
var trace = gd.data[0]

console.log(trace.x[0], trace.y[0])
console.log(trace.x[trace.x.length - 1], trace.y[trace.y.length - 1])

@etienne ,

Thank you for your prompt response. Please, see the picture below containing the result. of your code. So what I am seeing is odd. The first console.log yields full arrays, whereas the second one returns only the single x,y pair.

When I changed, the index in the first console.log to 1 it gave me the first x,y pair…
dataCheckPlotly2

Like I said, I’m new to JS so maybe there is something weird in my non-plotly code. Thanks again!

There is definitely something weird happening. When I enter trace.x you can see that the original timestamp is repeated:

trace.x vs my timeStamp array:

I figured out the issue with some help from my web development instructor. I was using global variables timeStamp and pressure. Each time it was appending to plotly, it was appending the previous array on top of itself plus the new data. Here is what it looks like now:

//Create Arrays to Store data in  
    var timeStamp = [];
    var pressure = [];  

//Function to extract data from JSON messages and append to arrays
function extractData (message)  {
    var ts = [];
    var ps = [];
    
    message.forEach(function(element) {
        ts.push(element.time);
        ps.push(element.vals[2]);
        
    });
    
    return {ts: ts, ps: ps};
};
//On Message, append data to the plot
exampleSocket.addEventListener('message', function (mEvent) {

     var new_data = extractData(JSON.parse(mEvent.data).records.data);
     //console.log(JSON.parse(mEvent.data).records.data);
     console.log(new_data);
     var update = {
      x:  [new_data.ts],
      y: [new_data.ps],
      
    };
    
    Plotly.extendTraces(psi_graph, update, [0]);
  })
//Plotly
psi_graph = document.getElementById('psiGraph');

var data = [{
  x: [timeStamp],
  y: [pressure],
  mode: 'lines',
  line: {color: 'red'}
}]


Plotly.plot(psi_graph, data);
1 Like