I. Overview
1) The gauge, which can visually display the progress or actual status of a metric, is primarily used to show progress or percentage.
2) The gauge has five subtypes: Multi-Pointer Gauge (360), Multi-Pointer Gauge (180), 100% Doughnut Gauge, 100% Solid Gauge, and Tube Gauge. This article will introduce these different subtypes.
3) Please read: Chart Data, Chart Style, Chart Special Effects
| You will learn |
|---|
|
II. Basic Steps
Some similar steps in the design of the five sub-types of gauges are briefly described here.
Insert chart
Click [Insert]>[Floating Element]>[Insert Chart]>[Dashboard], and then select one of the subtypes.
III. Multi-Pointer Gauge
A multi-pointer gauge has scales and pointers, where the scale represents the metric, the pointer itself represents the metric series, and the pointer points to the current value.
With a multi-pointer gauge, the progress or actual status of a metric can be displayed visually, but in only one dimension. It is not advisable to display many metrics, and the information displayed is limited.
There are Multi-Pointer Gauge (360) and Multi-Pointer Gauge (180) available. The following description takes the Multi-Pointer Dashboard (360) as an example, which is similar to the Multi-Pointer Dashboard (180).
1. Bind Data
1) Create a new DB Query ds1 and select [FRDemo] as the database by inputting the following SQL statement:
SELECT Category_name, Inventory_quantity, Order_quantity, Re_order_quantity
FROM Product JOIN ProductCategory
ON Product.CategoryID=ProductCategory.CategoryID
WHERE Category_name='Beverages'
2) Click [Floating Element]>[Data] to enter the data binding interface.
Set the [Data Source] to [Dataset Data], select the newly created [ds1] in [Dataset].
Choose [Category_name] in [Category].
Select [Enable Field Name] for [Series Name].
Add [Inventory_Quantity], [Order_Quantity] and [Re_Order_Quantity] to [Field Name], and select [Sum] as the summary method for all of the three.
2. Set Styles
1) General style
Select the chart and click [Style]. There are a variety of chart types, but most of the style settings are similar to the general style. You can refer to Chart Style. The effect of the style settings can be seen in the left-hand pane.
2) Special Style
Some settings in the [Style]>[Series] of the multi-pointer gauge are different from the general style, and are introduced separately here.
Layout: When displaying gauges by category name, more than one gauge will appear. In this case, you can change the orientation of these gauges.
Style
Hinge: You can select the color of the central hinge of the gauge here.
Hinge Background: You can select the background color around the central hinge of the gauge here.
Pointer: You can select the color of the pointer here.
Pane Background: You can select the overall pane background color for the gauge here.
Set Radius: If you selecting Auto, the default radius will be used; if you select Fixed, you can customize the radius of the gauge.
Range: If you select Auto for scale and color, the default settings will be used; if you select Custom, you can divide the scale stage and change the color of the scale.
3. Set Special Effect
For a detailed description of settings of Special Effect, see Chart Special Effects for the settings of general special effects.
4. Preview Effect
Save and preview. At the bottom, the category "Beverages" is displayed, and the pointer points to [Inventory_Quantity], [Order_Quantity] and [Re_Order_Quantity], with the corresponding values displayed at the bottom of the gauge.
IV. 100% Doughnut Gauge
The 100% Doughnut Gauge is of a complete doughnut shape, which can visually display data such as percentage, completion rate and achievement rate. but in only one dimension. It is not advisable to display many metrics, and the information displayed is limited.
Here you can select the gauge and click [Floating Element]>[Type] to change it to [100% Doughnut Gauge].
1. Bind Data
1) Here you need to use another data query by creating a new DB query ds2 and inputting the following SQL statement:
SELECT Category_name, sum(Inventory_quantity) as Total_Inv
FROM Product JOIN ProductCategory
ON Product.CategoryID=ProductCategory.CategoryID
WHERE Category_name='Beverages'
2) Click [Floating Element]>[Data] to enter the data binding interface.
Set the [Data Source] to [Dataset Data], select the newly created [ds2] in [Dataset]
Choose [Category_name] in [Category].
[Pointer Value] forms the numerator of the percentage with the minimum value setting under [Style]>[Axis]. Select [Total_Inv] here.
[Target Value] forms the denominator of the percentage with the minimum value setting under [Style]>[Axis]. Select [Custom] here, and set it to 500.
2. Set Styles
1) General style
Select the chart and click [Style]. There are a variety of chart types, but most of the style settings are similar to the general style. You can refer to Chart Style. The effect of the style settings can be seen in the left-hand pane.
2) Special Style - Series
Some settings in the [Style]>[Series] of the 100% Doughnut Gauge are different from the general style, and are introduced separately here.
Orientation: There are multiple categories in the dataset, and more than one gauge will appear. In this case, you can change the orientation of these gauges.
Rotate Orientation: You can choose clockwise or counterclockwise here.
Pane Background: It controls the background color of the blank circle area, which is gray by default.
Inner Pane Background: It controls the background color of the inner area of the circle, which is transparent by default.
Set Radius: You can select Auto or Fixed to control the size of the 100% Doughnut Gauge here.
Chute proportion: You can change the size of the chute area in the middle of the gauge here.
Scale and color: It controls the color of the scale on the 100% Doughnut Gauge.
3) Special Style - Axis
Some settings in the [Style]>[Axis] of the 100% Doughnut Gauge are different from the general style, and are introduced separately here.
Minimum Value: The Minimum Value, together with [Pointer Value] and [Target Value], determines the percentage, where Percentage = (Pointer Value - Minimum Value)/(Target Value - Minimum Value).
3. Set Special Effect
For a detailed description of settings of Special Effect, see Chart Special Effects for the settings of general special effects.
Note: There is no conditional display under Special Effects Settings in the 100% Doughnut Gauge.
4. Preview Effect
Save and preview. The category "Beverages" and the corresponding number are displayed at the bottom of the gauge. The percentage is set as 74.4% of 500.
V. 100% Solid Gauge
The 100% Solid Gauge, of an incomplete circle shape, can visually show the metrics and achievement of data, and display sales completion rate, product pass rates and other data or a percentage of progress. However, it does not visually display data trend changes and is not suitable for comparison and analysis of multiple data.
Different from the 100% Doughnut Gauge, it uses a scale chute style.
Here you can select the gauge and click [Floating Element]>[Type] to change it to [100% Solid Gauge].
1. Bind Data
Click [Floating Element]>[Data] to enter the data binding interface. Use ds2, and bind data by reference to IV. 100% Doughnut Gauge - 1.Bind Data.
2. Set Styles
1) General style
Select the chart and click [Style]. There are a variety of chart types, but most of the style settings are similar to the general style. You can refer to Chart Style. The effect of the style settings can be seen in the left-hand pane.
2) Special Style - Series
Some settings in the [Style]>[Series] of the 100% Solid Gauge are different from the general style, and are introduced separately here.
Orientation: When displaying gauges by category name, more than one gauge will appear. In this case, you can change the orientation of these gauges.
Pointer: It controls the color of the pointer here, which is transparent by default.
Chute: It controls the background color of the chute of circle, which is light gray by default.
Set Radius: You can select Auto or Fixed to control the size of the 100% Solid Gauge here.
Chute proportion: You can change the size of the chute area in the middle of the gauge here.
Scale and color: It controls the color of the scale on the 100% Solid Gauge.
3) Special Style - Axis
Some settings in the [Style]>[Axis] of the 100% Solid Gauge are different from the general style, and are introduced separately here.
Minimum Value: The Minimum Value, together with [Pointer Value] and [Target Value], determines the percentage, where Percentage = (Pointer Value - Minimum Value)/(Target Value - Minimum Value).
3. Set Special Effect
For a detailed description of settings of Special Effect, see Chart Special Effects for the settings of general special effects.
Note: There is no conditional display under Special Effects Settings in the 100% Doughnut Gauge.
4. Preview Effect
Save and preview. The category "Beverages" and the corresponding number are displayed at the bottom of the gauge. The percentage is set as 74.4% of 500.
VI. Tube Gauge
A Tube Gauge is like a test tube with scales and a progress line, where the scales are used for measurement and the progress line indicates the completion rate.
The Tube Gauge, which can visually display the progress or actual status of multiple metrics, is primarily used to show progress or percentage. However, it cannot analyze data based on the time category, and comparisons and analysis are impossible in individual charts.
Here you can select the gauge and click [Floating Element]>[Type] to change it to the [Tube Gauge].
1. Bind Data
1) Here you need to use another data query by creating a new DB query ds3 and inputting the following SQL statement:
SELECT Category_name, sum(Inventory_quantity) as Total_Inv
FROM Product JOIN ProductCategory
ON Product.CategoryID=ProductCategory.CategoryID
WHERE Category_name! ='Daily necessities'
GROUP BY Category_name
2) Click [Floating Element]>[Data] to enter the data binding interface.
Set the [Data Source] to [Dataset Data], select the newly created [ds3] in [Dataset]
Choose [Category_name] in [Category].
[Pointer Value] forms the numerator of the percentage with the minimum value setting under [Style]>[Axis]. Select [Total_Inv] here.
[Target Value] forms the denominator of the percentage with the minimum value setting under [Style]>[Axis]. Select [Custom] here, and set it to 800.
2. Set Styles
1) General style
Select the chart and click [Style]. There are a variety of chart types, but most of the style settings are similar to the general style. You can refer to Chart Style. The effect of the style settings can be seen in the left-hand pane.
2) Special Style - Series
Some settings in the [Style]>[Series] of the Tube Gauge are different from the general style, and are introduced separately here.
Sort orientation: It controls the orientation of the Tube Gauge, with two modes for option: Horizontal and Vertical. The orientation of the Tube Gauge is set as Vertical by default.
Pointer: It controls the color of the pointer here, which is transparent by default.
Chute: It controls the background color of the chute of the tube, which is light gray by default.
Set length: You can select Auto or Fixed to control the length of the Tube Gauge here.
Chute width: It controls the width of innner chutes.
Scale and color: It controls the color of the scale on the Tube Gauge.
3) Special Style - Axis
Some settings in the [Style]>[Axis] of the Tube Gauge are different from the general style, and are introduced separately here.
Axis Label: It controls whether to display or hide the axis label.
Character: You can set font, size, color, italic and bold font here.
Custom Minimum Value: If checked, it can customize the Minimum Value which, together with [Pointer Value] and [Target Value], determines the percentage, where Percentage = (Pointer Value - Minimum Value)/(Target Value - Minimum Value).
Custom Main Unit: It controls the main scale unit, for which a formula can be input.
Custom Minor Unit: It controls the minor scale unit, for which a formula can be input.
Main Tick: You can set the background color of the Main Tick here, which is light gray by default.
Minor Tick: You can set the background color of the Minor Tick here, which is light gray by default.
Axis Label Format: You can set the format of axis labels to common or custom, which is set common by default.
4) Special Style - Label
Special settings are made in the [Style]>[Label] of Tube Gauge. You can set position of the percentage label or value label as Top, Bottom, Right or Left. The position of the percentage label or value label is Bottom, and follows the pointer position.
3. Set Special Effect
For a detailed description of settings of Special Effect, see Chart Special Effects for the settings of general special effects.
Note: There is no conditional display under Special Effects Settings in the Tube Gauge.
4. Preview Effect
Save and preview. The name of each category and the corresponding values and percentages are displayed below each tube.
