Using States with Custom Visuals by OKViz
Some of the visuals by OKViz use performance states to highlight numbers, areas or images by color. This feature works the same way in all the components that implement it. Let’s see how to use it.
Performance states can be defined in two ways: by binding measures or by manual setting.
Binding measures
In all the visuals that support performance states, you will find the following binding fields:
- Measure: Binds the main measure that contains your data points values. It is not related to the states only, so probably you set it in any case, to make the visual working properly.
- States Measure: Binds an alternative measure providing the value to compare with Target and States. If you don’t set it, the main measure will be used for all the comparisons.
- Target: Binds a goal measure. If you set it, then you can define the other states as percentages or modifiers over the target itself. If you don’t set it, all the other states must be defined by absolute values.
- States: Binds multiple measures. The order of the measures assigned is important (more on this later). Each state represents a goal to reach or to stay over.
Note that creating calculated measures in Power BI Desktop is very simple – see here for more information. However, if you are worried about the confusion that new measures could bring to your users, consider that you can right-click on each of them in the Fields panel and choose Hide from their context-menu.
After the binding process, you will find that the States section of the visual property panel has several properties related to the measures themselves, using the same names.
Here, you can choose how the visual reacts to the state changes. In the above case, you can only choose the colors to assign to each state. Depending on the visual, there might be other options available for each state.
Note that in this case the Target is present at the bottom of the list, because it is checked for a last term of comparison (more on this later).
Using manual states
If you choose to not bind measures, you can still use states by setting them in the visual property panel. Our components come with 5 manual states you can play with.
The manual states are not visible whether there is any measure bound to the States field.
Setting States values
If you have bound a Target measure, you can define States as percentages or modifiers over the target itself, and not only by absolute values (which is the only option if you don’t bind the Target measure).
You can choose the preferred behavior using the Value type option.
The following configurations are all valid and describe an equivalent configuration using the three different settings for Value type:
Absolute value
| Measure | Target | Variance | State 1 | State 2 | State 3 | State 4 | State 5 |
|---|---|---|---|---|---|---|---|
| 10,000 | 7,000 | 42,86% | 3,500 | 7,500 | 10,000 | 15,000 | 17,500 |
Percentage over Target*
| Measure | Target | Variance | State 1 | State 2 | State 3 | State 4 | State 5 |
|---|---|---|---|---|---|---|---|
| 10,000 | 7,000 | 42,86% | -0.5 | 0.0714 | 0.4286 | 1.1428 | 1.5 |
Modifier over Target
| Measure | Target | Variance | State 1 | State 2 | State 3 | State 4 | State 5 |
|---|---|---|---|---|---|---|---|
| 10,000 | 7,000 | 42,86% | –3,500 | 500 | 3,000 | 8,000 | 10,500 |
Defining how Comparison works
After you define how the data is stored, you choose how the comparison works. To do that, you set the comparison operator in the Comparison field.
To determine the color to apply in the visual, the State Measure (or the Measure if the former is not available) is compared to each state, from the first to the last one, using the selected comparison operator.
Note that the comparison operator control the evaluation order of the states defined by measures, resorting them before the comparison takes place, unless you use the “=” operator or you use manual states (in both cases, the expressions are evaluated in order of binding/definition). The first match found following the evaluation order defines the resulting state.
From hereinafter, you can see several examples to clarify how the rules work. Consider the following measures and their corresponding value.
| Valuation | Excellent | Good | Just okay | Poor | Terrible |
|---|---|---|---|---|---|
| 5 | 9 | 7 | 5 | 5 | 3 |
- If the operator is > or >= the states are sorted by their values in descending order. The resulting state is Terrible.
- If the operator is < or <= the states are sorted by their values in ascending order. The resulting state is Good.
- If the operator is = the states are not re-sorted and they are evaluated following their order in the fields panel. The resulting state is Poor.
In conclusion
States are very powerful tools to convey information, but there are many possible scenarios and covering all of them is not that simple.
In our custom visuals, we tried to manage most of the possible requirements, making it possible to create complex configuration if needed.
Do you want to see our performance states in action? Download Synoptic Panel and Card with States, both by OKViz.
Have you some questions? Leave your comments below.