The Gauge component enables you to compare a current value against a target value and see progress toward a goal.
There are several styles to choose from when building a gauge Klip. Use indicators to show when the current value has surpassed a threshold (or is not reaching a goal) or color ranges to indicate a wider range of states (e.g., cold, warm, hot).
This article includes:
Component structure
Following is an example of the component structure for a gauge component that uses a color range.
Choosing a style
You can display your gauge using any of the following style options: horizontal, vertical, arc, semicircle and circle. Here is an example of a vertical gauge:
To change the gauge style:
Applying color ranges
You can apply color ranges to your gauge so that as your "needle" passes through certain ranges, you can assess its state. In this example, two color ranges have been added to indicate acceptable and unacceptable occupancy rates.
To apply color ranges:
- Select Gauge in the component hierarchy, then select the Properties tab, and click Add Color Range.
- Select Range 1 in the component tree and select a color by clicking drop-down arrow in the colored square.
- Set Start 1 and End 1 values for the range by selecting each of them in the component tree and entering the values you want to set for them into the formula bar.
- To add more ranges, repeat steps 1 - 3, adding Range 2, Range 3, etc.
Note: You can quickly add color ranges to the gauge by clicking the + button on the right side of the Klip preview.
Adding indicators
You can add indicators to a gauge to change the gauge color according to the values of Current Value and Target Value. Note that indicators override color ranges.
To add indicators:
- Select the Gauge in the component hierarchy and select the Indicators tab.
- Click Add to create an indicator, for example, If: Current Value is greater than 1 then: Gauge change color.
Click in the empty text field to see the list of available options from which to select.
Video demo on building a gauge custom Klip
Watch this video for a quick demonstration on how to build a gauge custom Klip. It uses sample data that’s included in your Klipfolio account so you can follow along.
Please note that after this video was filmed, we improved the method for adding a component and a data source to a custom Klip. After clicking Build a Custom Klip, you land in the Klip Editor where you select the Gauge component and drag it into your Klip. Then you connect to your data by clicking +Add Data Source at the bottom of the Klip Editor window.