KPCity: a KPI as a city. (Qlik Extension)

[MigueldelCampo]

In many dashboards, a KPI is simply a large, highlighted number; a subscript, a green or red arrow, etc. When used properly, it allows dashboard users to identify the most relevant data at a glance.

While building a dashboard to monitor facilities, I came up with the idea of giving a KPI a different look by using Qlik extensions, which are basically a package (ZIP) containing a manifest, a CSS file, and the corresponding .js file.

Unfortunately, although the result looked nice, it lost points in terms of readability. It made it harder to understand which KPI was being displayed and, honestly, the colors and shapes attracted more attention than the actual data itself.

So, we ruled this out as a daily-use tool. But... there was no shortage of laughs along the way.

It was a great opportunity to learn a little more about how Qlik works internally. Who knows, maybe someday it will be useful for something else.

For quite some time, I have had an Android application installed on the screen at home called YoWindow, which displays different colorful scenes after a few minutes of inactivity, along with the time, weather, etc. I took inspiration from its city scenery for this extension.

The idea is to have several buildings, facilities, pharmacies, etc., each with their own doors, decorations, and windows.

Define a KPI, set a maximum value for it, and use the illuminated windows as the KPI: the closer the value gets to the defined maximum, the more windows are turned on.

Visually appealing? Yes.
Practical? Not at all.

Pretty clear so far.

I started from the ground up, testing the JavaScript integration and trying to "reach" what Qlik calls the hypercube (layout.qHyperCubeData).

The hypercube provides the following data:

• qDimensionInfo: information about each dimension in your application or dashboard.
• qMeasureInfo: information about each measure.
• qDataPages: the context containing the data.

I used the simplest expression I could think of to bring a real piece of data from Qlik into Javascript: ReloadTime().

If I could display ReloadTime() inside my extension, I knew I was on the right track!

Fortunately, there is quite a lot of documentation available to give Claude enough context to produce this:

Here is the hypercube with all its definitions!

Perfect! I could finally see the light at the end of the tunnel. I was now able to connect my JavaScript with Qlik.

From this point on, things became much easier, because without all the complete definitions, the extension simply wouldn't work. Instead of displaying the function's result or calculation, it would show the expression itself.

For the city, I defined SVG vectors directly inside the JavaScript, since this is much easier than importing images. And don't even get me started on loading external images without the appropriate tenant permissions — that's simply impossible for security reasons.

So, our friends "the vectors" were the better option. After all... they're just simple shapes.

Once the script was ready, including the variables I thought would be interesting for users to configure — such as colors, number of buildings, minimum and maximum values — I passed it to Claude and asked it to package everything for me.

It made several suggestions, fixed some issues in the script, and gave me the ZIP file ready to import.

Installation is straightforward: in Qlik Cloud, go to Administration → Extensions → Add. Once uploaded, the extension becomes available as an asset in the object gallery, ready to be dragged and dropped onto a sheet.

I'm leaving the GitHub link here in case anyone is still interested:

https://github.com/Miguelos2/extensiones/blob/main/KPCity/CiudadKPI.zip

Have a great week!