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

Animation graph dynamic range (SOLVED)

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

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

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}
});

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