How to share your Grafana dashboards on TV screens with Fugo Digital Signage CMS

Get to grips with your metrics using Fugo CMS and Grafana dashboards

If you’re looking for the most bang for your buck in the business insights and analytics world, Grafana is definitely a good way to go. They offer a surprisingly robust free-forever plan, which gives you plenty of logs, traces, and 10,000 active series Prometheus metrics.

There is a fairly steep learning curve, but Grafana has a great learning section, with a very active community, in-depth documentation, and a super helpful Tutorials section to guide you through a lot of the things you’ll want to do.

Grafana certainly has the credentials to boast, being used by huge brands like Salesforce, Seimens, and Verizon - as well as having an impressive Success Stories section on their site - is definitely proof that the Grafana platform can handle almost anything you can throw at it. There are a lot of factors to their success, and one of them is definitely versatility; it can take your data from all kinds of sources, including various cloud services, Google Apps (like Sheets), clusters, and even more homebrew solutions like the raspberry pi, and collate it all into a single dashboard for easy viewing and giving you a single source of truth when it comes time to actually use the metrics you’ve gathered.

Your Grafana Dashboard & the Fugo TV Dashboards Feature

Once you are starting to compile your insights into one single Grafana dashboard, it only makes sense to put it in front of the people who can act on it. Fugo can help you display your analytics on your workplace TV screens so that your team can get a shared overview of your data very easily.

However, your business analytics are sensitive information that you don’t want falling into the wrong hands, and integrating with a third-party dashboard platform opens up doors for hackers or people that want access to your data.

Fugo takes your data confidentiality seriously. Our TV Dashboards feature has been built with security in mind; unlike other solutions — which might create a URL that can be accessed by anybody on the web or store your personal login credentials on an external device that can be lost or stolen — Fugo works in conjunction with a private Cloud server, encrypting your details and logging in on there so that your login is kept secret, and your data is kept safe.

Best Practices for using Grafana with Fugo CMS

Integrating your Grafana dashboards with Fugo TV Dashboards is a super straight-forward process. Before we get started, though, let’s take a look at some of our best practice recommendations that you should follow when setting up any third-party solution with Fugo TV Dashboards:

1. Create a service account:

We've worked hard to develop the TV dashboards feature so that your sensitive data is completely secure. But as an extra precaution we highly recommend using a 'least privileged' service account when setting up your dashboards - this is usually an account that has read-only permissions for the dashboards you want to display on your screen(s.) You can read more about how to set up a service account with Google here.

2. Start with your dashboard URL

It's often the case that you can navigate directly to your target dashboard's URL when creating a new dashboard in Fugo. This will require you to log in, and then you’ll be redirected back to your destination. This is the quickest and most reliable journey you can make in Fugo Dashboards as it cuts out unnecessary steps in your journey.

3. Search for your dashboard

Most dashboard services have search capabilities. Instead of clicking through multiple menus, you can get to your target content quicker and more reliably by searching for it. We recommend searching the full name of the content you want to display, as partial search terms may return more items you'll have to sift through.

Connect your screens to a Fugo account

2.1 Log into your Fugo Account. If you don’t have an account yet, you can start your 14-day free trial here.

Note: TV Dashboards are a part of Fugo's Business Plan. During your free trial, you can create one dashboard. To create any more, you will need to upgrade your plan.

2.2 Make sure your screen(s) are connected to Fugo CMS. If you haven’t connected your screen(s) yet, you can find the instructions for that here.

Create a new dashboard

2.3 Click Dashboards in the top navigation bar to go to your Dashboard library. If you have not created any dashboards yet, this page will be empty.

<a href=https://fugo.intercom-attachments-1.com/i/o/439725687/3f9116cc14dd4561c21c78df/Screen-Shot-2021-12-08-at-4.54.16-PM.png"/>

2.4 Click Create Dashboard to get started. This will take you to the New Dashboard recorder page where you will follow the instructions to capture and preview your dashboard before publishing it to screen.

2.5 Next, simply enter the URL you use to log in to Grafana (https://grafana.com/auth/sign-in), and click Go.

💡 As we mentioned above, it can be really handy to copy the URL of your dashboard and use that as the URL here instead — meaning you’ll just log in once, and then be redirected straight to your dashboard! Adding “?kiosk” to the end of that URL when using Grafana can give you a clearer interface for display on screens.

2.6 If this is your first time creating a TV dashboard, a popup guiding you on how to configure your Chrome browser to allow the Fugo recorder to run in incognito mode will appear. You can find our instructions for allowing incognito mode here. If this is not your first time, you can skip this step.

2.7 Fugo will open an incognito window using the URL you entered earlier. You should see the login screen for Grafana. Enter the email and password you use, and log in as normal.

2.8 Now that you’re signed in, you’ll see the Grafana Cloud Portal. Click the Log In button on the Grafana tile. If you look at the right-hand side of the screen, you can see the Fugo CMS recording the steps that you’re taking so that it can repeat them later on a private Cloud server when you need to access the latest data in your dashboard — which is how our secure connection works!

2.9 We recommend searching to find your dashboard, as the positions of items on the home screen can change. Select Search Dashboards from the left-hand pane.

2.10 Our dashboard for this example is called “New Dashboard”. Search for your dashboard and select it from the list - this is an extra step that ensures the Fugo CMS can reliably access the correct dashboard every time, by taking the guesswork out of the process!

2.11 When you’re looking at the dashboard that you want to show on your digital signage, you just need to click Capture Dashboard in the bottom pane to take a screenshot and let the Fugo recorder know that you’ve reached the end of the recording.

💡 You can use the Element Screenshot button to capture a specific portion of the screen - this is useful for tidying up your dashboards, and allowing users to focus on just the data rather than anything around it (like the search bar, side panes, etc.)

2.12 You’ll see a loading message while the recorder runs through the steps to ensure that it can reach the dashboard you want to display. It can take a few minutes to complete depending on the platform you’re using, so don’t sweat if it takes a little longer than expected!

2.13 Once your dashboard shows up, and you’re happy with the way it looks, you can publish it to your screens or playlists by selecting the Publish button in the bottom right to open the Publish popup. You can also select Save to save this dashboard for later, allowing you to come back and publish it at a later time.

Tips and Tricks for your Grafana dashboard design

While you can just throw up a bunch of graphs and tables and call it a day if you want, to make the most of your metrics you’re going to need to put some thought into how you lay your dashboard out. Overwhelming your coworkers with insights isn’t going to lead to effective decision-making, and might actually lead to information overload and analysis paralysis — something that will definitely hinder more than it will help!

Let’s go over a few things you can do to help your team while you’re setting your dashboards up:

  1. Pay attention to your axes! Graphs can be really helpful for visually communicating in-depth and complex data in a simple way and at a glance — which is great! However, the axes still have to be labeled, and you need to pay attention to how they’re labeled if you want to keep everything clear. Make sure you’re using the largest units appropriate for your data (for instance, gigabytes instead of megabytes) and are limiting your decimal points to keep the amount of text around the graph as low as possible. Make sure the labels you’re using are clear and self-explanatory and make sure the text stands out enough against the background that it’s easily readable.

  2. Graphs vs Tables. Not everything should be a table, and not everything should be a graph, either! You’ll need to make the right decision, based on the data in each panel, about what format to show your information in. It can also be helpful to switch up your layouts, grouping tables and graphs together on a row, instead of having multiple graphs side-by-side.

  3. Keep it simple. When you’re viewing something as naturally complex as a business intelligence dashboard on a screen directly in front of you that you’re controlling, you can deal with complicated layouts and very small text. This wouldn’t necessarily be the same if you were viewing a dashboard you didn’t control from a screen on the other side of the room. When you’re putting your dashboard together, think about what you absolutely need to show and what can be omitted - aim to show crucial information only, and avoid fluff, filler, or otherwise irrelevant information.

  4. Be easy on the eyes. You can help avoid eye strain and headaches for your team by paying attention to the colours and fonts you’re using. We recommend using colours that don’t clash and are a little more muted than bright red or green. Keeping important text big and bold, and less important or more explanatory text smaller and lighter, will help instinctively guide a viewer’s eyes around your dashboard and deliver the important information in an easy-to-understand way. Remember - if you’re displaying your dashboard on your workplace TV screens, your team will be viewing them from a distance, so you need to make it as easy to understand your dashboard at a glance as possible!

As we mentioned at the start of this guide, Grafana has an amazing, comprehensive Tutorials section, which is definitely something to check out if you’re looking for more information on how to build your dashboard (or if you’re looking to have a little fun with your workplace screens).

If you have any further questions about connecting your Fugo account with Grafana, or feedback about the Fugo TV Dashboards feature, you can drop our support team a message at support@fugo.ai and we'll get back to you as soon as possible!

Did this answer your question?