Stream to multiple Axis using plotly.js

plotly.js
1

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

2

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

3

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)
4

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
5

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

1 Like