Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Live Streaming data using javascript

var socket = io();
socket.on('temp', function(temp){
  $('#messages').html(temp);
  //graphing

var myPlot = document.getElementById('myDiv2'),
  layout = {
    hovermode:'closest',
    title: "Live Data Streaming",
    xaxis: {
      title: "X Axis",
      titlefont: {
        family: "Verdana, Sans-serif",
        size: 18,
        color: "#7f7f7f"
      }
    },
    yaxis: {
      title: "Live Data",
      titlefont: {
        family: "Verdana, Sans-serif",
        size: 18,
        color: "#7f7f7f"
      }
    }
  };



  data = [ { x: [0,1,2,3,4,5,6], y:[temp], type:'scatter'} ],



  Plotly.newPlot('myDiv2', data, layout);
  myPlot.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(4) + '\n\n';
    }
    alert('Closest point clicked:\n\n'+pts);
});
});

Can the javascript open source live stream data in from a socket into its graph? I have seen examples of node js live streaming in data. But can javascript do it?? Right now the code above, just replaces the old temp with the new temp at x=0 each time a new temp is received. Any ideas??

Yes. We don’t have any official examples for it though at the moment.

I’d recommend using Plotly.extendTraces instead of Plotly.newPlots for this taskt. See examples here: http://codepen.io/etpinard/pen/qZzyXp