Live Streaming with plotly in javascript
<pre><code>    &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
    &lt;body&gt;
    &lt;div id="myDiv2" style="width: 600px; height: 650px;"&gt;&lt;!-- Plotly chart will be drawn inside this DIV --&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;script&gt;
    var socket = io();
    socket.on('temp', function(temp){
      $('#messages').html(temp);
        var layout = {
    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"
      }
    }
  };
  var i=0;
  var loop = setInterval(function () {
  var trace1 = {
    x: [i],
        y: [temp],
        type: 'line'
      };
      i++;
    }, 5000);

      var data = [trace1];
      Plotly.newPlot('myDiv2', data, layout);
    });
          &lt;/script&gt;
</code></pre>

<p>The socket is listening for the variable temp. I want to live stream this temp variable into a graph every five seconds. Right now, I am using plotly and setting an interval every five seconds, but the graphs will not show up in my html. If i remove the setInterval, the graph shows up fine but the old temp is replaced by the new temp rather than continuing the graph. Any ideas how to live stream this data in java script. </p>