Animation graph dynamic range (SOLVED)

plotly.js
1

Hi,

I’m working on animation that will draw graph of some mathematic functions.

Problem is that I can’t figure out how to make range of x axis dynamic.

I see 2 options:
a) xaxis updates automatically when data is too big for current x range.
b) I “manually” check if data is too big at each frame and, if needed, change it.

Does anyone know how to do it?

This is my js code.

var x = [], y = [];

var i = 0;
var j = 0;

Plotly.plot(‘graph’, [{
x: x,
y: y,
mode: ‘lines’,
hoverinfo: ‘none’
}], {
yaxis: {range: [-2, 2]}
});

function compute () {
x.push(i);
y.push(j);

i += 0.1;
j = Math.sin(i);

}

function update(){
compute();

Plotly.animate('graph', {
	   data: [{x: x, y: y}],
	},{
		transition: {
          	duration: 0,
        },
        frame: {
          	duration: 0,
          	redraw: false,
	   }
    }
);

requestAnimationFrame(update);
}

requestAnimationFrame(update);

2

Setting layout.yaxis.autorange: true in the first Plotly.plot should do the trick.

3

Nope. Doesn’t work. Is everything ok with my code? I tried with xaxis too.

Plotly.plot(‘graph’, [{
x: x,
y: y,
mode: ‘lines’,
hoverinfo: ‘none’,
}],{
yaxis: {autorange: true}
});

4

I did it. In every update function call I checked if current x value is bigger than current max value of x axis. If it is I use this code:

x_max += 6;

var changes = {
‘xaxis.range’: [-1, x_max]
};

Plotly.relayout(‘graph’, changes);
requestAnimationFrame(update);

1 Like