Extending trace for multiple graphs in plotly

Question

var $graphs=jQuery('#graphs');
var count=2;
socket.once('temp', function(temp){
  for (var i = 0, len = temp.length; i < len; i++) {
    jQuery('<div>', {
      'class': 'myDiv2',
      'id': 'myDiv' + count,
    }).appendTo($graphs);
    var x=document.getElementById('myDiv' + count);
    Plotly.newPlot(x, data, layout);
    count++;
  };
});


 setInterval(function(){
          var currentdate = new Date();
          var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() +  ":" + currentdate.getMilliseconds();
          var final=2;
          socket.once('temp', function(temp){
            for (var i = 0, len = temp.length; i < len; i++) {
              var x=document.getElementById('myDiv' + final);
              console.log(x);
              var update = {
                x: [[time]],
                y: [[temp[i]]]
              };
              Plotly.extendTraces(x, update, [0], points);
              final++;
            }
          });
        }, seconds*1000);

I am having a problem. I have a an array called temp which has values that i want to graph. For example if temp = [0,1,2], i want to graph element 0 on graph 1, element 1 on graph 2, and element 2 on graph 3. With the code above, all the elements are being graphed in all the graphs. Any idea??

Answer 1

If you want to extend trace for line chart here is the example,

var data = {
    x: [[1]],
    y: [[2]]
}
Plotly.extendTraces(plotlyDiv, data, 0, 20);
// plotlyDiv is graph container
// data is graph data
// 0 is index of graph (important if you have multiple graph/trace)
// 20 maximum number of element to show

Link to function reference: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyextendtraces