Black Lives Matter. Please consider donating to Black Girls Code today.

Help Streaming Unknown number of Traces

Hello,

I have a large amount of data where I would like to be able to have a user select which variables they wish to plot. The number of traces will vary based on the number of selections. I am having trouble getting this to work correctly. I am trying to save the selection data into arrays, but I cannot get it to work.

The function below gets called repeatedly from another function. “data” is an array that contains the new values that I would like to plot starting at index 2. I would like to stream each new value as a separate trace. The first time it executes it builds the plot correctly. I am having trouble with the second half after the else. I need x and y to be an array of all the values with x being time and y being the variable value.
Any idea what is wrong?
Thank you

function plotlylive(data){		

var timearray= [];
var time = new Date();
var numplots = [];
var xdata=[];
var ydata = [];
var plotdata = [];

if (liveloaded == false){

		var update = [];
	    for ( var j = 2; j < data.length; j++ ) {
		
		 	var plotdata = {
			  x: [time],
			  y: [data[j]],
			  mode: 'lines'
			}
			update.push(plotdata);
			numplots.push(j-2);
		 }
     
	console.info(update);
	Plotly.plot('plotlydivLive', update);
	liveloaded = true;
	
}else{

	var newtime = [];
	var newdata = [];
	
	//this didnt work
/*      for ( var j = 2; j < data.length; j++ ) {
			numplots.push(j-2);
			newtime.push(time);
			newdata.push(data[j]);
			}

	var update = {
	  x: [[newtime]],
	  y: [[newdata]],
	  mode: 'lines'
	}	 */ 
	
	//this didnt work
/* 	var update = [];
    for ( var j = 2; j < data.length; j++ ) {
		 	var plotdata = {
			  x: [time],
			  y: [data[j]]
			}
			update.push(plotdata);
			numplots.push(j-2);
			}

	console.info(update);
 */
		//this works buts its fixed to 2 values
		/*   var update = {
			x: [[time], [time]],
			y: [[data[2]], [data[3]]]
			
		  }   */
		  var xval = []
		  var yval = [];
      for ( var j = 2; j < data.length; j++ ) {
			numplots.push(j-2);
			xval.push(time);
			yval.push(data[j]);
			}


		  var olderTime = time.setMinutes(time.getMinutes() - 1);
		  var futureTime = time.setMinutes(time.getMinutes() + 1);

		  var minuteView = {
				xaxis: {
				  type: 'date',
				  range: [olderTime,futureTime]
				}
			  };
	var xtext = ['[' + time + '],[' + time +']'];
	Plotly.relayout('plotlydivLive', minuteView);
	Plotly.extendTraces('plotlydivLive', { x: [xtext], y: [[yval]]},numplots);
	//Plotly.extendTraces('plotlydivLive', { x: [[time],[time]], y: [[data[2]],[data[3]]]},[0,1]);
										   //{ x: [[time],[time]], y: [[80]        , [55]]}       ,[0,1]"
											//{x: [[time], [time]],y: [[80], [55]]}
	
	//Plotly.extendTraces('plotlydivLive', update);		
  }

}