Plotly.js autoscaling

Question

Is there a parameter in Plotly.js to autoscale axes so that they automatically match the plotted data?

Scenario: I have been drawing the temperature (along the Y axis) over time (along the x axis) for the last 30 minutes.

Problem. When the page loads, the graph shows nothing. I would set the axes, but the x axis should show the last 30 minutes and update every minute. However, when I click "Autoscale" or "Reset Axes", the graph is perfect for the data!

Question: Can I set the schedule to automatically "Autoscale" when the page loads, instead of requiring the user to "autoscale"?

See the app here: https://vast-fortress-23871.herokuapp.com/

Answer 1

Really stupid to crack it:

document.querySelector('[data-title="Autoscale"]').click() 

It will automatically click the "Auto Zoom" button. The best way would be to find out what function the button actually calls and call it.

Answer 2

I had the same problem. The code you linked has been reduced, so I cannot (will not) read it, but here is what I did wrong:

If plotly.newPlot() is executed before all the data has been loaded, it will not be automatically logged (since it has no data and does not know how to check it).

eg,

 var plotdata = [x:[],y:[],type: 'scatter']; $.get('mydata.dat',(x) => {/*put parsed x into plotdata*/}); Plotly.newPlot('mydiv',plotdata,layout); 

note that plotdata is populated after plot creation because $.get() is asynchronous.

Answer 3

I solved this problem with relaying. Just set the autorange property to "true" on xaxis and yaxis. It will be autoscaled on both axes:

 // To call when data is ready, after your page loads. Plotly.relayout( yourGraph, { 'xaxis.autorange': true, 'yaxis.autorange': true }); 

Answer 4

For me, this worked perfectly and simply:, var layout = {xaxis: {autorange: true, showgrid: false, zeroline: false, showline: false, etc.}

Answer 5

For me, this worked perfectly and simply (thanks to https://codepen.io/plotly/pen/KpLVzv ):

 // script comes before var layout = { xaxis: { autorange: true, showgrid: false, zeroline: false, showline: false, etc. } // script comes after