Create a KPI widget

KPI Widgets

A KPI widget is a widget showing one (or a few) numerical indicators: current annual revenue, number of users, average basket for an e-commerce site...

A good practice is to gather the most important KPIs of your activity in a bar at the top of the first tab of your dashboard, for example:

Create a KPI widget

To create a KPI widget, in the list of widgets, click on the icon:

Like for any widget, the first configuration step is to specify the datasource to use in the widget:

When you have selected the datasource, the full configuration menu is available. In the Data menu, select the measure you want to show in the widget. For example, the widget below shows the sum of the column Price:

If you want to count the number of rows, use the $$count$$ special measure in the selector.

In most cases, selecting one measure is sufficient. To show more advanced measures (e.g. ratio of sales of one product category vs another category) you must create a value formula to compute it and then select it as the measure for the KPI widget (see the tutorials dedicated to formulas).

To rename the widget, click on the current text "New KPI" and enter your new text.

Add filters

In many cases, you want to add a filter on your data. This can be done in the Filter section in the widget configuration menu. You can add as many filters as you need.

For example, to filter the rows to keep only the sales of the previous year, you can use the "Date in year(-1)" filter:

In this example we used the syntax "in year(-1)" to keep only rows of last year. Read our documentation about time filtering to get all the options available to filter a datetime column.

Add formatting

By default, the formatting is not satisfying (there are too many decimals in the above example). In the Formatting section, you can modify it. In the selector, choose your measure and edit its numeral type.

Tip: to open the formatting section, you can also click on the cog icon in the top right corner of the widget.

Advanced formatting

In Serenytics, values obtained from the data engine can be transformed just before being displayed. This is done in the Formatting section, with the computing and rendering formulas.

For example, in the widget below, the value is divided by 1000 (and of course, we use "k$" as currency in the numeral format):

You can find more details about these formulas in the table tutorial.

Change the rendering

In the Rendering section, there are many possibilities to change the rendering of your widget. The most important one is the Template. The default rendering template is "Icon". With this template, the widget shows the value beside an icon. The settings let you change the icon and colors.

The most used template is the simplest one: "KPI with title". As the name says, it shows your KPI, a title and that's all:

Tip: to select the colors for several KPI widgets, do not try to create a new palette, instead use an existing palette from a website (e.g. using the website: colourlovers.com). To import a color, copy its HEX code (hexadecimal code, e.g. FC9D9A) and paste it in the text field of the color editor in Serenytics.