Thursday, November 7, 2019

Published 8:00 AM by with 0 comment

Easy Way to Add Busy GIF to Plotly

Quick guide for adding a busy gif over a plotly plot while it renders.
First, here's an example of this..

How does that work?

Plotly promises

I haven't seen it used often, but plotly methods like 'newPlot' and 'react' return promises when the plot is done rendering. A simple way to handle this then is:

  • show busy gif
  • call newPlot or react in a setTimeout
  • in newPlot or react's '.then', hide the busy gif
That's it. The render code then looks something like this:

  document.getElementById(busyId).style.display = "block";
  setTimeout(function() {
    Plotly.newPlot(plotId, traces, layout).then(
      document.getElementById(busyId).style.display = "none"
  }, 5);

'busyId' is the id of the img element for the gif, plotId is the div for the plot, and traces and layout are your plotly traces and layout.

Putting a gif on a specific div

I posted a full tutorial for this here. Briefly though, the logic is:
  • make plot position relative
  • make gif's img position absolute
  • put gif's img element within the plot div
  • toggle 'display' on the gif's img element as needed




Post a Comment