Gauge Chart

Effortlessly visualize data trends with Yeeflow's gauge chart feature. Streamline analysis and decision-making effortlessly.

Updated over a week ago

The Gauge Chart displays the performance of a metric relative to scale using a needle on a dial. Often used on executive dashboards, gauges use the direction of the needle and the color of the dial to help users quickly understand performance.


When Should I Use a Gauge Chart?

A gauge chart is most effective when paired with other gauge charts. This will allow your end-users to better understand the context of current performance relative to expectations.


Add Gauge Chart to the page

Firstly, find the Gauge Chart control in the controls add panel,. Then, drag and drop it into a section or container on your page.


Select data source

The source explains where you found the information that is in your graph. Select the target data list as the source content to create based on filters conditions.

Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.

Afterward, move on to the List section. Select the data list under the selected application.

In the Data Filters section, click the condition button to filter the data from the selected data list.


Chart value and scale range

Open the Content > Chart block. Set the text as indictor name, and select the field as the actual value of the Gauge Chart.

Scale range: Set the data as the start and end value of this Gauge Chart.

For the example below, the Gauge Chart can be count (count the number of records), sum (sum of the total value of records), Count distinct (tallies unique values in data), Avg, Max or Min of the profit for current sales, and the range as start from 10,000, to 1,000,000.


Settings of Gauge Chart

Chart Height: Set the height of this Line Chart control.


Styling the Gauge Chart control

Indicator

  1. Font Family: Set font family of the Indicator.

  2. Size: Set font size of the Indicator.

  3. Weight: Set font weight of the Indicator.

  4. Style: Set font style of the Indicator.

  5. Text Color: Set the color of the Indicator.


Advanced Settings

Set the Advanced options that are applicable to this control.


โ€‹

Did this answer your question?