I have a Grafana server running on my Virtual Private Server which is graphing indoor air quality data. I want to share a live version of the graphs on a Wordpress page.
Grafana has the facility to share graphs with an 'embed' option, see image below:
<iframe src="http://localhost:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>In order to share this graph, I have altered the Grafana config file to have allow_embedding = true and disable_sanitize_html = true. This was explained in this video.
I have copied the Grafana embed HTML, replaced the 'localhost' with my website (cairanvanrooyen.com) and pasted into my WordPress site (https://cairanvanrooyen.com/2024/12/28/ieq-monitoring-test-page/):
<iframe src="http://cairanvanrooyen.com:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>
This iframe is however, displaying as an empty box...
The live Grafana graph seems to be externally accessible and live: http://cairanvanrooyen.com:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo
Why does the Grafana graph not display on my WordPress site? I have noticed that the Grafana is HTTP, not HTTPS, is this the source of the issue?