Thursday, November 7, 2019

Published November 07, 2019 by with 1 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



1 comment:

  1. สล็อตวอลเลท เป็นอีกหนึ่งบริการที่นักเดิมพัน เกมสล็อตออนไลน์ น่าจะรู้จักกันดีในชื่อของ สล็อตxo โอน ผ่าน วอ เลท ไม่มีขั้นต่ํา คือผู้ให้บริการความสะดวก ด้านการเงินในการเล่นเกมสล็อต เพื่อทำธุรกรรมด้านการเงินได้อย่างรวดเร็ว โดยที่ผู้เล่นไม่ต้องเดินทางไปทำรายการที่ธนาคารให้ยุ่งยาก เหมือนเมื่อก่อน