Help: Live Data with Websockets

plotly.js
1

Hello,

Currently I am trying to use Plotly to make a live pie chart with data coming in from a websocket connection. However, I cant seem to get the data from the socket to the graph. Right now I see two ways of doing it. One is to get the data out of the onmessage function, such as returning a value to the parent function. The other is putting the Plotly code into the onmessage function. Neither are currently working. Im not planning on talking about getting data out of the onmessage function in this thread since this one is for Plotly not websocket. I will link a stack overflow thread where I asked about that if your interested in that part.

So, Onto the problems I’m running into with putting Plotly inside the onmessage function. For some reason, when I cut and paste the code to create the graph into that function it “freezes” the program. The script will run as normal till it gets to the point where it makes the graph, you can see it make the graph, then it just sits there. The entire code stops as shown by the fact that it should loop back to the start of the function and update live text on the page and this stream stops. My code is given below if you want to take a look at it.

var pmsg = "null";
var ws = new WebSocket('ws://localhost:10011/');
ws.onmessage = function(event)
{
     if(pmsg == 'QC1R1TR')
     {
          QC1R1TR = event.data;
          var testing = document.getElementById('QC1R1TR');
          testing.innerHTML = "Run Time: " + QC1R1TR;
     }
     
     pmsg = event.data;

     var data = [{
     values: [2, 1],
     labels: ['TR', 'TNR'],
     type: 'pie',
     automargin: true
     }];

     var layout = {
     height: 300,
     width: 300,
     margin: {"t": 0, "b": 0, "l": 0, "r": 0},
     //showlegend: false
     };

     Plotly.newPlot('QC1R1Pie', data, layout);
}

Please note that when the plot is static numbers currently so its not an issue with the variables. The plot works when its in the parent function and so does the live text on the page.

Any help with this would be greatly appreciated!

Thanks,
Luke

2

I found an alternative solution by getting the data out of websocket. Please see the other thread for details on that solution.

For your reference, I have attached the link to the other thread again below.