Gauge
This article describes the Gauge component and its properties.
Last updated
This article describes the Gauge component and its properties.
Last updated
Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.
Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article
The Gauge is a data visualization component that displays a value on a dial and compares it against certain thresholds.
Select Gauge from the Data Visualization category of the component library. Move the mouse over the canvas and click to add a gauge to your project:
The Gauge properties consist of INDICATOR SERIES, GENERAL, SCALE, and DYNAMIC VISIBILITY drawers. This guide will not describe the dynamic visibility properties as these are generic to each visible component; a separate guide and tutorial on dynamic visibility can be found here.
The Indicator series properties apply to Gauge functionality, including indicator points, styling, and labeling.
Indicator Series - A list containing all created series that display on the Gauge component
Name - a property that defines the selected series' name. This property can be bound to the spreadsheet
Value - a property that defines the value displayed on the gauge for the selected series. This property can be bound to the spreadsheet.
Type - A dropdown to select the indicator type on the component
Indicator Fill - a property to change the color of the indicator
Opacity - a property to change the opacity of the indicator fill
Indicator Border - a property to change the color of the indicator border. This is checked by default. Uncheck to disable the indicator border.
Opacity - a property to change the opacity of the indicator border. This is checked by default. Uncheck to disable the indicator border.
Indicator Border Width - a property to change the width of the indicator border. This property is not visible if the border is unchecked.
Center Size - A property to adjust the size of the gauge center point.
Center Fill - a property to change the color of the gaude center point color.
Opacity - a property to change the opacity of the gauge center point
Center Border - a property to change the color of the gauge center point border. This is checked by default. Uncheck to disable the indicator border.
Opacity - a property to change the opacity of the gauge center point border. This is checked by default. Uncheck to disable the indicator border.
Center Border Width - a property to change the width of the gauge center point border. This property is not visible if the border is unchecked.
Gauge Value Shown - a dropdown to change which of the created indicator series is displayed as the value on the gauge.
Font - Choose a font style from the dropdown list.
Size – Change the font size of the text.
B I U – Use these toggle buttons (bold, italic, underline) to change the format of the button label. When any of these is toggled on, the button is blue:
Text Color - The value will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the text
Position - select the value position from the dropdown. The value can be positioned Outside or Inside the gauge component.
Padding - the value will adjust based on the padding set.
Number Format / Decimal Places - these properties control the format used to display the value
Use thousands separator - check to apply a delimiter to larger values.
The General properties apply to the component's styling and appearance, including the shape, title, and section colors.
Style -
Full - adjusts the gauge component to display a full gauge
Half - Up - displays the component as a top half
Half - Down - displays the component as a bottom half
Half - Left - displays the component as a left-half
Half - Right - displays the component as a right-half
Title - Used to change and customize the primary title on the Chart. Select the checkmark to hide/show.
Font - Choose a font style from the dropdown list.
Size – Change the font size of the push button label.
B I U – Use these toggle buttons (bold, italic, underline) to change the format of the button label. When any of these is toggled on, the button is blue:
Text Color - The value will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the text
Capitalization - Change the letter case of the label text content to either uppercase first letter, all uppercase letters, or all lowercase. Unselecting all of the buttons will return the content to its original case format.
Padding – This property defines the space between the component border and the component. It can be set in 3 ways:
The blue button indicates the current selection.
Typing in a value.
Binding to value in a spreadsheet cell.
A subsection to apply Alerting to the chart line markers. Select the checkbox to enable/ disable.
From - the minimum value set for the corresponding alerting range
To - the maximum value set for the corresponding alerting range
Fill - the color set to display the corresponding alerting range.
Min - an input property to enter the minimum value on the gauge scale
Max - an input property to enter the maximum value on the gauge scale
Font - Choose a font style from the dropdown list.
Size – Change the font size of the push button label.
B I U – Use these toggle buttons (bold, italic, underline) to change the format of the button label. When any of these is toggled on, the button is blue:
Text Color - The value will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the text.
Position - select the value position from the dropdown. The value can be positioned Outside or Inside the gauge component.
Padding - the value will adjust based on the padding set.
AXIS LINE
Axis Line - The line will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the axis line.
Weight - the weight of the line will match the pixel value entered in the property field.
Color - The scale markers will be shown in the color that matches the value entered in the property field.
Opacity – This determines the transparency of the scale markers.
Weight - the weight of the scale markers will match the pixel value entered in the property field.
