Plotly getting static images of a particular instance

plotly.js
1

When using https://plot.ly/javascript/static-image-export/ 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.

2

Here’s how: http://codepen.io/etpinard/pen/EyZXwp

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.

3

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?

4

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) => {
    console.log(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.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAHCCAYAAAANehpvAAAZD0lEQ…AgQICAwesHCBAgQIAAAQIE0gIGb7pe4QgQIECAAAECBBYubAMk5mVXxQAAAABJRU5ErkJggg==

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

5

I think something like http://codepen.io/etpinard/pen/KrxQLz? 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.

6

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