UI-Template Plotly-Script does not load after reload

[Gunnar1]

Hi guys,

I wanted to add a plotly chart to a dashboard.

To load plotly I added the following code to the head with the ui-template node.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

If I deploy or restart the flow it works perfect. But if I hit F5 it seems like the script does not load and i got the following errors:

I also tried charts.js but I had the same problem.

Does anyone know a fix or knows the problem? I tried several things, but nothing did help. I'm not that much into Javascript.

[UnborN]

Hi .. i believe if you scroll down your browser's console you'll see that the plotly script loads but not in time before your code in the ui-template executes. So you get the Plotly is not defined error.

One simple solution is to wrap your code in a setTimeout to give the script enough time to load.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
(function(scope) {
 
  setTimeout(() => {

  // your code 

  }, 1000)


})(scope);
</script>

not the cleanest workarounds but it can work

[madhouse]

There's a javascript event called onload() that fires whenever a script or page has completed loading. It's built in such a way that if you wrap all your code into it, your script will only fire once the page has finished loading regardless of how it started. If you restart your flows, it loads the page and then fires the onload() event. If you refresh your page, it loads the script then fires the onload() event. In every case, the script is loaded before anything else happens. You'll have to look up your particular case with putting it into a web page, but there are many, many pages on the interwebs where you can find info on the onload() event.

There's also other methods you can use, but they all work off of the same idea. Make something load, then run something else. But if you start looking up onload, you'll find what you're wanting.