Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Stream to multiple Axis using plotly.js

Hi all,
I am currently trying to stream to multiple axis. I have no problem streaming multiple traces on one y-axis or making a static plot with two y-axis. However, I haven’t been able to combine these two.

More precisely, I have two traces and two y-axis. Each trace is supposed to be streamed to one of the two y-axis.
I found an example for this problem using plotly.py ( https://plot.ly/python/multiple-trace-streaming/ ) but nothing for Javascript.

This is my first programming experience using JS, any help is much appreciated!

Best
Timo

Can you share what you’ve tried so far to help us help you?

Of course, my bad for not posting right away. Here is what I have:

	var time = new Date();

	var trace1 = {
		x: [time],
		y: [Math.random()+1],
		type: 'scatter+line'
	};

	var trace2 = {
		x: [time],
		y: [Math.random()],
		yaxis: 'y2',
		type: 'scatter+line'
	};

	var toPlot = [trace1, trace2];

	var layout = {
	showlegend: false,
	yaxis: {title: 'Mvmt (yes/no)'},
	yaxis2: {
		title: 'Stress (%)',
		titlefont: {color: 'rgb(148, 103, 189)'},
		tickfont: {color: 'rgb(148, 103, 189)'},
		<!-- overlaying: 'y', -->
		side: 'right'
	}
	};

	Plotly.plot('tester', toPlot, layout);
	
	var interval = setInterval(function() {
	
		var time = new Date();

		var trace1 = {
		x: [time], 
		y: [Math.random()+1]
		}

		var trace2 = {
		x: [time],
		y: [Math.random()],
		yaxis: 'y2'
		}

		var toPlot = [trace1,trace2]

                    // I believe here is where my error is. I can't figure out the correct plot command. Below are some I tried.
		//Plotly.extendTraces('tester', toPlot, [0,0])
		Plotly.extendTraces('tester', toPlot, [0,1])
		//Plotly.extendTraces('tester', toPlot, [0])
		//Plotly.extendTraces('tester', trace1, trace2, [0,0])
         
          },1000)

Here’s a working example: https://codepen.io/etpinard/pen/yzaqmJ?editors=0010

Note the call signature for extendTraces. It does not expect new traces. Instead, it expects attribute-to-array map tables. You must have missed this https://plot.ly/javascript/plotlyjs-function-reference/#plotlyextendtraces

I hope this helps.

1 Like

Indeed, I did miss that part. Thanks for helping out, it works perfectly now!

1 Like