Plotly getting static images of a particular instance

When using and trying to generate a images, is there a way I can get dataURI of that image as I am planning to capture images at various instance and send them back to server. I am planning to use base64 encoding to send the images back to the server.

Also can you share how the images are generated for the plot? i am planning to capture multiple images of the plots when the user is moving the plot and then send this to server to make a video out of it. Is this anyhow feasible ?

Also how much time does the image generation take?

@etienne Insights into the image capturing will help me a lot.

Thanks in Advance.

Here’s how:

It’s all here plotly.js/src/snapshot at master · plotly/plotly.js · GitHub

It is feasible. You’ll need to listen to the plotly_relayout event and wrap Plotly.toImage in its handler.

We haven’t ran any extensive benchmarks as of yet.

Thanks a lot for the above info. Though i have 1 more question. plotly_relayout event is only fired when we change the plot from 1 point to another. It Doesnt change when i drag the plot . The moment i release my mouse and stop dragging, the event is fired. Are there events to capture the dragging part?

Also i dont the reason why the following code isnt giving me the required dataURI. The image formed is totally blank.

var myPlot = document.getElementById('myDiv');
myPlot.on('plotly_relayout', function(data){
  Plotly.toImage(data).then((dataURI) => {

The data URI generated doesnt provide me with the image after i try and convert it using base 64 convertors where as the one that you have sent in the codepen does.


The above is the URI that i get. ending with ==

I think something like is roughly what you’re looking for.

That’s correct. It is fired at the end of the interaction.

You can try attaching on 'mouseover' event to the graph <div> itself instead.

I Figured out the first query. Thanks for the 2nd hints. I ll try along those lines.