Gauge

This article describes the Gauge component and its properties.

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:

Gauge Properties

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.


INDICATOR SERIES

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.

STYLING

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

DATA LABEL TEXT

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


GENERAL

The General properties apply to the component's styling and appearance, including the shape, title, and section colors.

GAUGE STYLE

  • 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

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

ALERTING -

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.


SCALE

  • 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

AXIS LABEL TEXT

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

SCALE MARKER

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

Last updated

Logo

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.