Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

How to extend traces properly in js

 var currentdate = new Date();
 var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();

    var trace1 = {
      x: [time],
      y: [0],
    };

    socket.once('temp', function(temp){
      for (var i= 1; i < temp.length; i++) {
      Plotly.addTraces(plotDiv,{x: [time],y: [0]});
    };
  });

    if ( document.getElementById("threshold").value!='' && document.getElementById("threshold").value!=null) {

      var data = [trace1];
      Plotly.newPlot(plotDiv, data, layout);
      var update2 = {
        shapes: [
          {
            type: 'line',
            x0: 0,
            y0: threshold,
            x1: points,
            y1: threshold,
            line: {
              color: '#002B7F',
              width: 4,
            }
          }
        ]
      };
      setInterval(function(){
        socket.once('temp', function(temp){
          var currentdate = new Date();
          var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + ":" + currentdate.getMilliseconds();
          var update = {
            x: [[time]],
            y: [[temp[0]]]
          };
          Plotly.relayout(plotDiv, update2)
          Plotly.extendTraces(plotDiv, update, [0], points);
        });
      }, seconds*1000);
      plotDiv.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(6) + '\n\n';
        }
        alert('Data point clicked is located at:\n\n'+pts);
      });
    }

I have an array like [2,9,50,60], that I am getting from the backend that changes each time. I want to live plot this on the same graph using extend traces. In the first part of my code, I create enough traces on my plot that are needed based on the array I am receiving. For example, if the array I get back from the backend has 4 elements, I create 4 traces. Now I want to extend each trace by each element in the array.
Example- if array is temp[]=[2,9,50,60], with values changing each time. I want the first trace to be extended by temp[0], then second trace by temp[1], etc. Right now, I have trace1 being extended by temp[0] but need a way for the added traces to be extended? I can’t seem to figure it out
?

This example http://codepen.io/etpinard/pen/qZzyXp should help you get started.

Hi,
Can you please respond to this, I have a similar setup but I get time data from db, I was succeful in making the plot work but some how after 1000 request my time goes to 1970 5:30 am Jan 1. Don’t know what is causing this.