A bar chart represents a single value in an item.
Use type: number and indicator: bar to generate a bar chart from a single value in an item. (See example 1.)
The column must be type: number.
By default, the smallest data value from the column is used as the leftmost edge, and the largest data value as the rightmost edge automatically. (See example 1)
Use format: "range(x,y)" to specify the charts to be drawn within the borders with the leftmost value at x and the rightmost at y. Note, however, that if the data precedes or exceeds the specified range, those data values will be used as the range. (See example 2)
Regardless of whether the range of the chart is set explicitly, it applies to all the bar charts in a given column and not on a per-item basis.
In versions up to and including 5.4, the background (or the "well") of the charts is displayed by default. To suppress it, use format: "nowell". (See example 3)
In version 5.5 and later, the well is not displayed by default. To display it, use format: "well". (See example 3)
To display the numeric value next to the bar chart in the same column, use placement: right | left. (See example 4)
To display the numeric value immediately to the right or left of the charts in versions up to an including 5.4, use format: "flowdata,nowell" and placement: right | left. (See example 5)
To display the numeric value immediately to the right or left of the charts in version 5.5 and above, use format: "flowdata" and placement: right | left.
By default, the colours used for indicator: bar are dependent on Klipfolio Dashboard's skin and hue settings that are being used by the user.
Starting from Klipfolio Dashboard version 5.3, you can specify a colour for a range of values by using the asset property. (See example 6)
From version 5.5, you can reverse the bars by the y-axis by using format: "drawreverse". (See example 7)
If a formula is used in the column, a bar chart representing the numeric result is also displayed in the footer.

Examples

In the following examples' images, the first column displays the raw data from which the charts are created.

1. Simple bar chart

You can use indicator: bar with type: number to display the values in a column as horizontal bar charts.


type: number;
itemcol: 2;
indicator: bar;

By default, the leftmost edge will be the smallest data value, and the rightmost edge will be the largest data value in that column. In this example, the bar charts span from -30 to 70.

If all data values are positive, the leftmost edge will be 0. If all data values are negative, the rightmost edge will be 0. To specify the range of the charts in a given column, see the next example.

2. Specifying a range for all charts in the column

Specify the range to your desired values for the right- and leftmost values using format: "range(x,y)". Note, however, that if the data values precede or exceed the specified range values, those data values will be used as the range.


type: number;
itemcol: 3;
indicator: bar;
format: "range(-50,100)";

3. Displaying the background

In version 5.5 and later, add the format value "well" to display the background of the chart.


type: number;
itemcol: 4;
indicator: bar;
format: "well";

In version 5.4 and earlier, the background is displayed by default. To hide it, use format: "nowell".

4. Displaying the data values with the charts in the same column

You can display the numeric values beside the charts by using the placement property.


type: number;
itemcol: 4;
indicator: bar;
placement: right;

The placement value can be one of the following:

right - the chart is displayed to the right of the values (shown in the screenshot above)
left - the chart is displayed to the left of the values
full - the chart is displayed without the values (default)

5. Displaying the data values immediately to the left or right in the same column

When there is no background to the bar charts, which is the default behaviour in version 5.5 and later, you can display the data values to their immediate right or left by adding the format value flowdata and placement: left or right as follows:


type: number;
itemcol: 6;
indicator: bar;
placement: right;
format: "flowdata";

In version 5.4 and earlier, in which the background is displayed by default, use the format value nowell additionally:


placement: right;
format: "flowdata,nowell";

6. Specifying colours for a range of values

You can specify colours of the bars according to a desired range of values. The range of values is defined by adding the <assets> block above your <style> block, and the CSS property asset is used to point to the name of the asset.

The available colours for the bars are: violet, blue, turquoise, red, yellow, green, and orange.

For example, we can set up the assets above the <style> block of the Klip as follows:


<assets>
    <good>green</good>
    <ok>yellow</ok>
    <bad>red</bad>
    
    <asset name="achievement">
    <![CDATA[
        good: value >= 50;
        ok:  value > 0;
        bad: value =< 0;
    ]]>
    </asset>
</assets>

This means, "Use green for the 'good' values, which are larger than or equal to 50; use yellow for the 'ok' values which are more than 0; and use red for the 'bad' values, which are less than or equal to zero." The <asset name="achievement"> block is where we define good, ok and bad.

Then, in the style definition for this column, specify that the asset named "achievement" should be used for the chart:


type: number;
itemcol: 7;
indicator: bar;
asset: "achievement";

7. Reversing the bar display

You can invert the display of the negative and positive values by using format: "drawreverse".


type: number;
itemcol: 8;
indicator: bar;
format: "drawreverse";

In the screenshot above, only the positive values are used to demonstrate how drawreverse works.

To leave a comment, you must sign in or register (it's free).


Comment Type:
Title:
Comment:

Displaying data as a bar chart

Problem:

Solution:

Example Klip

Important Notes

Overview