KPI Animation Widget (Gauge with animation)

Gauges are extremely popular with the business to represent key measurements. They usually show a single critical performance measurement and take a prominent place on the dashboard. VitaraCharts’ custom gauges have animated views to improve the aesthetics and also immediately draw the user’s attention to the KPI. Below is an example of a VI dashboard built using Vitara’s custom visualizations including the animated gauge.

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 Use 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.

KPIAnimation inputs

Tip 2

If you already have a single metric formatted as a percentage M1 a derived metric sum(1) to be used as M2 input.

An example dashboard showing various VitaraCharts elements. Note that the dashboard below has been formatted to have a dark theme. KPIAnimation inputs\

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.

animation threshold add

In the threshold editor window apply source, target, threshold condition and the other related information to set a threshold on the chart.

animation threshold condition

After giving all the inputs click on ‘Apply’ button.

Background Image

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