Designing Dashboards

3 Hacks to Level Up Your Dashboards

By John Sweazen
Share on LinkedIn Tweet about this on Twitter Share on Facebook

Five years ago, embedding basic data visualizations in an application was enough to make your product stand out. But today, dashboards and reports are the status quo—nearly every product offers them. To gain an edge in today’s competitive market, you need to think outside the box. Read on to learn about three simple hacks you can use to level up your application.

Hack #1: Create Custom KPIs

A KPI (Key Performance Indicator) is a critical indicator of progress toward an intended result. In a dashboard, a KPI displays data in a simple, easy-to-read format that can be interpreted at a glance. Types of KPIs include text, icon or color; chart based; progress indicators; trend; and combinations such as text and trend or trend and progress.

One way to level up your dashboard is to use custom KPIs such as KPI Trend, a visualization we created using simple HTML, CSS, and JavaScript. KPI Trend does not require Logi to work, however, if used within Logi, we created it as a Shared Element which allows you to define configuration parameters and tailor the look and feel to match your use case. You can also combine it with other KPI visualizations to provide a seamless look.

Hack #2: Replace Pop-Ups with Less Obtrusive Solutions

A pop-up is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something. Pop-ups are fine for certain aspects of web design, but in dashboards, they can break the flow and frustrate users. That’s why we designed the SlideIn Panel as a more elegant, less obtrusive alternative to pop-ups.

It utilizes simple HTML elements combined with CSS for styling and animation and can contain any type of content: text, drill-down data from charts, additional visualizations, navigation menus, filters, and more. Like the KPI Trend hack, we have created the SlideIn Panel as a Shared Element within Logi, which allows it to behave similar to native Logi elements. You can configure it using parameters to control styling, slide-in direction, margins, width, and more.

Hack #3: Turn Image Maps into Custom Visualizations

An image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a typical image that behaves as one single link). An image map provides an easy way to link various parts of an image without using separate image files.

There are several online tools you can use to build image maps, for our purposes we used the online tool at  To extend the functionality of the image-map we utilized a simple jQuery plugin called MapHilight. By adding color overlays, MapHilight can turn any basic image map into a custom color-coded visualization. You can use it to visually indicate items which require attention, as a heat map to indicate status levels, and in many other ways.

Learn more in the full on-demand webinar >

Originally published January 9, 2020

About the Author

John Sweazen is an Expert-On-Demand Solutions Consultant with Logi Analytics. He has more than 20 years of experience in the IT industry and helping to solve client issues.