12 Nov 2020

How to include anything in Grafana

gravatar Sam Zadworny

Introduction

Many people have added InfluxDB and Grafana to their setup, but there’s one major problem - you still need to switch between screens or windows to view various apps. I’ve got solution for it …let me show you how to display anything in Grafana. And ‘anything’ means things that you can access from your web browser. All you need to do is just add a new Text panel to your Grafana dashboard, use “iframe” block in the content, and apply one little fix to Grafana ini file. Result: better user experience, because you have everything in one place. It’s more like a workaround, but it works perfectly well. Details below.

Instruction

  1. Login to Grafana, and add a new panel: click the first button on the top-right hand corner titled Add panel, and then Add new panel blue button in the new box. screenshot#1

  2. Now focus on the setting in the Panel section on the right-hand side. First, insert any title you like in Settings. Then scroll down to Visualisation tab, and choose Text plugin. screenshot#2

  3. Below that in the Display section, select HTML mode and insert the following in the Content textarea: <iframe src="http://localhost:3000/@signalk/maptracker/" title="Map Tracker" style="width:100%; height:100%; padding:0; margin:0; border:none;"></iframe> In the src=”” insert an URL address of your choice - http://localhost:3000/@signalk/freeboard-sk/ is just for the tutorial purposes. Click the blue Apply button on the top-right hand corner to save the changes. screenshot#3

  4. Click Save dashboard - the second button on the top-right hand corner screenshot#4

  5. You can add more panels like this, and organise your dashboard however you like. screenshot#5

FIX: The Grafana’s Text plugin may not work with HTML code by default, and you may need to fix it in 3 simple steps: