How to create the single number card?

Tips and Hacks
,
#1

:question:Context:
Sometimes a single number is the most important thing you want to track in your dashboard or report, such as total sales…
By applying HTML format to the table chart, you can create a single number card as shown below:

Single number card
Single number card957×675 30.9 KB

:writing_hand:Detail Solution:

  • The workaround solution is basically to return a single value and use the html format option
  • Using business calculation concat to combine two values from two columns.
  • Note that concat function currently only works with text fields, so you might need to cast the number fields into text in the modeling layer: CAST(number as text)
  • Here is an example of HTML format:
concat(
  '<div style="display: flex; flex-direction: column; width: 300px; align-items:center; justify-content: center">',
    '<div style="font-size: 36px; margin-bottom: 20px">',
      {{ column1_value }},
    '</div>',
    '<div style="font-size: 18px; color: purple">',
       {{ column2_value }},
    '</div>',
  '</div>'
)
#2

Thanks for the tip @Anh_Vu ,

when would you suggest using this approach vs using the readily available KPI visual? Of course it has the potential to be more flexible, but does seem like a lot of additional steps for an incremental gain, unless there’s a point I’m missing?

(here’s how the 2 compare side by side)

image
image863×224 9.11 KB

2 Likes
#3

Thanks for your question. Let’s me explain the differences here:

  • The KPI chart allows you to compare your Single Value against another value. It may add an up or down arrow next to the single value and also show the percent/number change based on the comparison value.
  • My suggested approach could be useful for showing the value’s unit of measure or providing a chart description beneath the value (e.g., total users, total sales). Because Holistics currently doesn’t support native Single Value chart; this is a workaround solution to create this visual by applying HTML format.
    Hope it might be useful for you!
#4

Thanks for the additional info @Anh_Vu - I’ll certainly bookmark this for future reference.

1 Like