Making a dynamic x-axis with real-time

plotly.js
1

I’ve been using extendTraces() to make a real-time line graph, however the x-axis always seems to stay static. My graph looks like this example, however unlike the example, my data eventually disappears off the left side of the graph when enough data has accumulated on the screen. I would like the x-axis numbers to disappear off the screen as well once their respective y-values disappear. How would I do this? I have been searching the reference and can’t seem to find it.

2

Can you share your example to help us debug?

3

This is my JavaScript:

function rand() {
    return Math.random();
}

Plotly.plot('graph', [{
	y: [rand()],		
}]);

var interval = setInterval(function() {
	Plotly.extendTraces('graph',
	{
		y: [[rand()]],
	}, [0], 20)
}, 500);

With the div name being “graph”. I have experimented with the relayout() function, however it is giving me strange results, where the graph simply falls off the canvas.

4

Alright, this may not be the most efficient method, but it works so far. I eliminated the limit from extendTraces() and instead use relayout() to handle that for me, like this:

function rand() {
	return Math.random();
}

Plotly.plot('graph', 
[{
	y: [rand()],		
}],
{
	xaxis:
	{
		range: [0, 5]
	}
});

var cnt = 0;

var interval = setInterval(function() {
	cnt++;
	if(cnt > 5) {
		Plotly.relayout('graph',
		{
			'xaxis.range': [cnt - 5, cnt]
		})
	}
	
	Plotly.extendTraces('graph',
	{
		y: [[rand()]]
	}, [0])
}, 500);

If there is a better, cleaner way, please let me know. Thanks.

5

You can passing x coordinates to your extendTraces input http://codepen.io/etpinard/pen/QdZoQd

6

Oddly enough, when I try that, I get this error message on the console:

Uncaught Error: cannot extend missing or non-array attribute: x
    at h (plotly-latest.min.js:52)
    at f (plotly-latest.min.js:52)
    at Object.t [as extendTraces] (plotly-latest.min.js:52)
    at app.js:29
7

You’ll need to make sure your initial trace has an x array.