# How to extend traces properly in js

**URL:** <https://community.plotly.com/t/how-to-extend-traces-properly-in-js/1777>\
**Category:** plotly.js\
**Created:** [August 9, 2016, 3:05pm UTC](https://community.plotly.com/t/how-to-extend-traces-properly-in-js/1777 "2016-08-09T15:05:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Patidar](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@Patidar](https://community.plotly.com/u/Patidar)\
**Post date:** [August 9, 2016, 3:05pm UTC](https://community.plotly.com/t/how-to-extend-traces-properly-in-js/1777/1 "2016-08-09T15:05:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [August 10, 2016, 3:25pm UTC](https://community.plotly.com/t/how-to-extend-traces-properly-in-js/1777/2 "2016-08-10T15:25:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ganesh.dks](https://avatars.discourse-cdn.com/v4/letter/g/ea5d25/32.png) [@ganesh.dks](https://community.plotly.com/u/ganesh.dks)\
**Post date:** [June 19, 2020, 11:57am UTC](https://community.plotly.com/t/how-to-extend-traces-properly-in-js/1777/3 "2020-06-19T11:57:41Z")

</div>

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.