HTML Visualization Not Loading

Grafana
1

I have a few html visualizations that around a month ago or so stopped displaying on my dashboard (which it has been working for 3+ months). All my other data sources and visualizations load without issue. If I click on one of the html panels and select edit and then apply, it displays properly. When I try to navigate away it asks me to save the dashboard but there isn’t anything to save and the save button is greyed out. I’ve also made a couple minor changes so that I could actually save the dashboard but when I reload it I have the same issue of the html panels not displaying. Any thoughts?

2

welcome @adamhasselgren1

What version of grafana are you using? Which html panel plugin are you using?

3

Just the out of box HTML panel and Grafana v9.5.1

1 Like
4

Hi, what do the html visualizations do? are they iframes or links to another site or similar, because then you could be running into CORS issues.

5

I actually have different HTML panels and some have quite a bit of content however many of them just display an image. All of them were working about a month ago but now all of them have the same issue.

Here’s a basic example of one of them.

<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
  <img src="https://drive.google.com/uc?export=view&id=1_pHdfn3Z5AuVLmYhGmUGUMRnH6SmozP9" alt="Cloud Computing Image" width="902">
</div>
6

Is your grafana instance in the cloud or local, if local are you using http or https?

You can also open the developer tools in edge or chrome and inspect the element that is not showing, and view any errors from the console. typically if images links etc. aren’t working, its CORS related

7

Cloud version. Again it seems like something changed as all the HTML panels worked before on load. The HTML code is fine as they just don’t display on load, but if I go into the element and just hit apply it displays properly.

8

what happens if you make those images local to the grafana server in public/img or is that google drive a shared folder?

<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
  <img src="/public/img/champion.png" alt="Cloud Computing Image" width="902">
</div>

Have there been a change in your google drive location? permission/images moved, folders deleted?

image
image1605×486 125 KB

9

It is a shared folder in Google drive and I’m not aware of any changes. Also if it was a permissions issue it shouldn’t work at all but it displays fine if I do the following

  • Edit Panel

  • Hit “Apply”

  • HTML Panel displays fine

  • If I try and navigate away from the page it prompts me to save the dashboard. When I go to save the dashboard the “Save” button is greyed out and says “No changes to save”

1 Like