KPI Animation Chart

Gauges are often used in business to show critical measurements. They typically display a single essential performance metric and are prominently displayed on the dashboard. Custom gauges in VitaraCharts include animated views to increase aesthetics while also drawing the user’s attention to the KPI. A VI dashboard developed with Vitara’s custom visualizations, including the animated gauge, is shown below.

Inputs

Metrics - 2 metrics required. Metric 1, M1 will be the numerator and Metric 2 M2 will be the denominator making the displayed value as M1/M2 as a percentage. Attribute - Optional Add as Filter Option - Not available

The screenshot below displays the Profit Margin as a percentage value. The default color shown is blue on a white background but can be altered as desired for gauge or background.

In Vitara charts, the text formattings for the KPI animation chart are introduced. We can now format the text and change the vertical alignment of the text. Below is the example, where the alignment is ‘Top’ and some text formattings are done.

Thresholds

Based on the ratio of the two metrics we can apply thresholds on ring, wave or on the background of the chart. Hover the cursor on the chart, Click on the ‘Edit’ button and select the ‘Thresholds’ option in the properties window.

Open the property editor by clicking on the ‘Edit’ button and select the ‘Threshold’ tab.

The target thresholds can be applied on source metrics too. Only the ‘Ratio’ option is available in Source threshold, now the metrics can also be sourced.

Below is the example where the Target selected as ‘Wave’ and Source as ‘Profit’ and applied threshold condition as Greater than >20.

Background Image

The steps to set a background image for all Vitara charts are explained in backgroundImage.