In-cell sparklines with AtF Sparks and Nexel

Document created by sebastiangurt Employee on May 23, 2018Last modified by fantonelli on May 31, 2018
Version 4Show Document
  • View in full screen mode

About the Solution/Project: 

About the solution

Some time ago I read about using special fonts to visualize sparklines. The idea stuck with me and a few days ago I found AtF Sparks — After the flood. AtF Sparks is a set of fonts to transform numbers into sparklines.




Solution/Project info


To use the fonts is actually pretty easy. You just have to download from and install the fonts you would like to use (every style of sparkline is a different font).

For data to be displayed as sparkline you need to format it as a list of comma-separated values with curly brackets at both ends of the set (e. g. {30,60,90}), You can also have numbers at the beginning and end of the set, which are useful for providing the start and end points, e.g., 123{30,60,90}456. With the data in the correct format, all you need to do is change the font to the desired style. One of the typical use cases would be to visualize the monthly sales per year.





How does it work in BOARD?


To accomplish an in-cell sparkline in the above mentioned format we need to concatenate the separate months. We can do this using nexel.


Block a contains the value with a detail by Month


Block b is a nexel formula to get the max value of the whole range (to scale the sparklines correctly).


Block c,d and e all contain the same nexel formula and are just formatted with different styles of the font. What happens in that formula?

=concatenate("{",round([@a;*;-12]/[@b;*;*]*100,0),",",round([@a;*;-11]/[@b;*;*]*100,0),",",round([@a;*;-10]/[@b;*;*]*100,0),","  .......

I am using the relative reference mode to get the single month values from block a "[@a;*;-12]","[@a;*;-11]" and so on.This allows you to select a different year and still have a working layout.

Then I divide the single month value by the maximum of the whole range (to scale accordingly) and multiply by 100 (which is the maximum for the AtF Sparks font).

In the beginning and end I add the curly brackets and in between the comma to accomplish the correct format.


After that you just have to make sure to format the block correctly (leave the nexel editor and open the layout configurator). Set the algorithm type to text and enable the block format and select the desired style of sparkline.


Done. It is fast and it also works in drill down. Of course you can hide the unnecessary blocks if you like (monthly values, maximum). 


This solution works in HTML5 - which right now does not support the standard sparkline function.


Attachments/Print Screens/Videos

A working example is attached with DB and capsule.


Takeaways/ Hints for other community Members:

Please remember that the fonts need to be installed on every client! From my understanding the fonts are free to use.


29 people found this helpful