Displaying values as images

Problem:

You want to have graphic indicators for the values in your Klip.

Solution:

Note: This article uses advanced features that are only available in the business version of Klipfolio Dashboard. Add <enterprise>true</enterprise> in your <setup> block in order to try them in Klipfolio Personal Dashboard.

With the new CSS and XML properties in Klipfolio Dashboard 5, you can now display images next to numbers or replace numbers with images. All you need to do is create and save the images you want to use on a web server, and Klipfolio Dashboard will do the rest, according to your specifications.

First, decide what images you want to use and what values each image will represent. For example, let's say you are tracking the number of visitors to your website daily. You want to display an upward pointing arrow (up.png) for an increase, a downward pointing arrow(down.png) for a decrease and a straight line (nochange.png) for no change since the previous day. This information is placed in the <assets> block between the <setup> and <style> blocks like this:

...
</setup>
<assets>
    <down>http://static.klipfolio.com/images/.../arrow_down_red.png</down>
    <nochange>http://static.klipfolio.com/images/.../arrow_neutral_gray.png</nochange>
    <up>http://static.klipfolio.com/images/.../arrow_up_green.png</up>
    <asset name="arrows">
    <![CDATA[
        down: value < 0;
        nochange: value == 0;
        up: value > 0;        
    ]]>
    </asset>
</assets>

You can use anything for tag names instead of "down", "up" and "nochange", but we recommend using something suggestive of the actual state to make them easier to read and change later, if necessary.

Inside the <assets> block, we also set what <down>, <up> and <nochange> stand for in the <asset> block. In this case, we want to use up.png when the value is more than 0; use down.png when the value is less than zero; and nochange.png when the value is 0.

Note that "arrows" is given as a name of this asset. Again, you can name it anything you like, but it is important to give it a unique name because it is referenced by the CSS property 'asset' in the <style> block, which we will look at next. Unique names are also important because you may have more than one set of assets, and you will need to refer to each set by its name.

Now, we write the stylesheet section:

<style>
...
difference {
    type: number;
    itemcol: 1;
    content: generated;
    formula: "today-yesterday";
    indicator: asset;
    placement: left;
    asset: "arrows";
}
...
</style>

This means: the content of the selector difference is generated (content: generated) by subtracting the value of <yesterday> from <today> (formula: "today-yesterday"); and the difference from the calculation should be displayed with an asset as its indicator (indicator: asset) and matched with the set of assets named "arrows" (asset: "arrows").

Here's what the Klip looks like:

And its tooltip:

You also have an option of replacing the numerical value with text by specifying it with label under <assets> like this:

<down label="Decreased">http://static.klipfolio.com/images/.../arrow_down_red.png</down>
<nochange label="Unchanged">http://static.klipfolio.com/images/.../arrow_neutral_gray.png</nochange>
<up label="Increased">http://static.klipfolio.com/images/.../arrow_up_green.png</up>

Now the tooltip looks like this:

A sample Klip using static data discussed above can be found here.

To view and download sample Klip assets, visit the Klip Assets section.