Live Streaming data using javascript

1 
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??

2

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