Wyn Enterprise User Guide

Wyn Enterprise: Liquid Fill Gauge

The Liquid Fill Gauge chart is a gauge that can represent the data labels in percentage value and numbers. The data is displayed with the water level along with animations. It has many liquid shapes like Circle, Ellipse, Rectangle, Diamond. The liquid fills up to the relevant value with water wave animation.

Liquid Fill Gauge Example

Design a Liquid Fill Gauge Scenario

From the Dashboard Toolbox, open the Data Visualization node and drag-drop the Liquid Fill Gauge scenario under Indicators, onto the design area.

Adding the scenario from the Dashboard Toolbox

Bind Dataset to Liquid Fill Gauge Scenario

With the scenario selected, from the Data Binding tab, select the dataset. Once the dataset is successfully loaded in the designer, the data binding panel automatically expands and displays the data attributes available in the dataset.

The following image shows the Liquid Fill Gauge scenario bound to 'RetailDataset' dataset.

Adding a dataset to the scenario

On dragging and dropping the data attributes to the data binding area of the scenario, the liquid fill gauge is plotted accordingly, with a default title on the design area.

Scenario with bound attributes

Format Data Attributes

To format the data attributes and control the display of data, you can perform a variety of operations such as renaming, modifying data format and display unit, creating a hierarchy field, applying an aggregation method, etc.

For more information about these operations, see Data Attributes.

In the following image, the data format for the data attributes is modified to display the actual and planned revenue in 'currency'.

Formatting fields in a gauge

Analyze Data

Wyn Dashboards scenarios support rich data analysis and exploration capabilities that can help analyze massive amounts of information and make data-driven decisions. For example, adding filters to the scenarios, applying conditional formatting, etc. Note that you can apply all these operations using the Action Bar corresponding to each scenario in the designer.

For more information, see Data Analysis and Interactivity in Dashboards.

In the following image, data is filtered to show the sales revenue for the years - 2018 for Australia.

Data Filtering in Gauge

Customize Appearance

You can customize the default appearance by setting properties in the Inspector tab of the scenario such as selecting the liquid shape, wave animation, adding a border, modifying sub- titles, setting style, etc. Designing part is divided into the following 5 sections:

  • Chart Style
  • Border Style
  • Sub Title
  • Comparison Label
  • Data Label

Chart Style

You can customize the following properties under the Chart Style.
Customize Chart Style

Property Description
Liquid Shape To set the liquid shape in the chart, you can select any of the following shapes: Circle,Ellipse,Rectangle,Diamond. Default shape is Circle.
Wave Animation Set this to True, to apply animation on the liquid wave.
Wave Time To set the duration of a wave animation.
Rise Time To set the wave rise time when updating the scenario.
Wave Number To set the wave number in the container (from 1 to 3).
Peak Number To set the peak number of each wave in the container (from 1 to 10).
Wave Height To set the proportion of wave height in the container.
Wave Color To set the color of the wave.
Background Color To set the background color of the liquid shape.
Show Label Set this option to True to display all the labels.
Label Space To set the label space between each line. This option is enabled, when "Show Label" is set to "True"

Border Style

You can customize the following properties under the Border Style.
Modifying the border style in the scenario

Property Description
Border Gap To set the gap from border to inner liquid shape(circle,Ellipse,Rectangle,Diamond).
Border Width To set the width of the border.
Border Color To set the color of the border.
Dashed Length To set the length of the dashed border.
Dashed Space To set the space between the border dashes.

Sub Title

You can customize the following properties under the Sub Title.
Modifying the Sub Title in the scenario

Note: This option is displayed only when the Show Label is set to True under Chart Style.

Property Description
Show Sub Title Set this option to True to show the sub title in the liquid shape.
Sub Tittle Font Setting To customize the font size, color, type, etc. for the Sub Title text.
Sub Title Text Here, you can type the text for the Sub Title to be displayed, as per your requirement.

Comparison Label

This section will display the comparison between the actual and target values. You can customize the following properties under Comparison Label.
Formatting the compariison label in the scenario

Note: This option is displayed only when the Show Label is set to True under Chart Style.

Property Description
Show Actual Value Set this option to True to display the Actual Value in the liquid shape.
Show Target Value Set this option to True to display the Target Value in the liquid shape.
Comparison Label Font Setting To customize the font size, color, type, etc. for the Actual Value and Target Value text.

Data Label

You can customize the following properties under Data Label.
Formatting the data label in the scenario

Note: This option is displayed only when the "Show Label" is set to True under Chart Style.

Property Description
Show Data Label Set this option to True to display the data label in percentage or numbers, in the liquid shape.
Data Label Font Setting To customize the font size, color, type, etc. for the data label text.
Decimal Places You can set the decimal places for the data label.
Value Type To set the ratio format of data label in Percentage or Number.
Range Color To set the range color according to ratio.