Gauge Widget
The Gauge widget is displays a needle gauge that visualizes a single value within a specific range. You can configure the widget in the following ways:
Define how many sections or intervals the gauge has.
Control the visibility and formatting of value labels.
Set the aperture and reference angle values to control how the data range is displayed.
Display a legend that describes the data.
Control the sizing of the tick markers, needle, center dot, and the gauge border.
Binding Data to the Gauge Widget
To display data on the Gauge widget, you must bind a numeric property to its Data property.
1. In Mashup Builder, bind a numeric property from a service to the widget Data property.
2. On the Properties panel, configure the following properties:
To set the range on the gauge, use the MinValue and MaxValue properties.
To format the values and labels of the widget, use the ValueDecimals and LabelDecimals properties.
To set the aperture of the value range, use the Aperture property. By default, the aperture is set to 255.
3. Click Save, then View Mashup.
The gauge value is displayed when the bound data service is executed at run time.
In ThingWorx 9.4 or later, you can bind a data source to the ValueDecimals and LabelDecimals properties to set the number of decimals dynamically. Different types of data may require specific formatting of value and label decimals. For example, you can match the value formatting to the current data type when the gauge displays data from multiple sources.
Configuring the Gauge Value Label
By default, the widget displays current value using the gauge needle. You can display a value using the widget ValueDisplayMode property. The following are the available options:
None—Hides the value label (default).
Inside—Inside the gauge.
Top—Above the gauge.
Bottom—Below the gauge.
Widget Properties
* 
Styles and common widget properties are not included in the table below.
Property Name
Description
Base Type
Default Value
Bindable? (Y/N)
Localizable? (Y/N)
CustomClass
User defined CSS class to apply to the top div of the widget. Multiple classes can be entered, separated by a space.
STRING
n/a
Y
N
Data
The widget data source. You must bind a single numeric value.
* 
You can only set the value of this property dynamically using a binding.
NUMBER
n/a
Y
N
MinValue
Minimum value for the gauge
NUMBER
0
Y
N
MaxValue
Maximum value for the gauge
NUMBER
100
Y
N
ValueFormatter
Styling rules for gauge needle and value display.
STATEFORMATTING
State Formatting
N
N
FormatNeedle
Applies State Formatting to the needle.
BOOLEAN
True
N
N
Intervals
Number of gauge intervals (affects ticks, labels, and indicator ring).
NUMBER
10
N
N
IntervalsPerLabel
Number of gauge intervals per label (affects the amount of labels).
NUMBER
2
N
N
LabelDisplayMode
Location to display the Label (inside, outside, or none).
BOOLEAN
Inside
N
N
ShowDataLoading
Displays the data while it is loading.
BOOLEAN
True
N
N
MinorTicks
Number of minor ticks between major ticks.
NUMBER
4
N
N
TickLength
Length of major tick.
NUMBER
8
N
N
MinorTickLength
Length of minor tick.
NUMBER
4
N
Y
ValueDisplayMode
Location to display the Value (top, bottom, inside, or none).
STRING
Bottom
N
N
LabelDigits
Number of digits used to display the label values.
NUMBER
3
N
N
LabelDecimals
Number of decimals used to display the label values.
NUMBER
0
Y
N
ValueDigits
Number of Digits used to display the values.
NUMBER
3
N
N
ValueDecimals
Number of Decimals used to display the values.
NUMBER
0
Y
N
LegendDisplayMode
Location to display the legend (Top, Bottom, or None).
STRING
Bottom
N
N
Legend
Text for the gauge legend.
STRING
n/a
Y
Y
ReferenceAngle
Angle that controls the gauge orientation (degrees).
NUMBER
225
N
N
Aperture
Angle that controls the gauge size (degrees).
NUMBER
270
N
N
NeedleDiameter
Diameter of the gauge needle (pixels).
NUMBER
10
N
N
CenterDiameter
Diameter of the gauge center (pixels).
NUMBER
20
N
N
GaugeBorder
Width/thickness of the gauge border (pixels).
NUMBER
20
N
N
RingWidth
Width/thickness of the gauge ring (pixels).
NUMBER
10
N
N
ToolTipField
Optional tooltip that is displayed when hovering over the widget in run time.
STRING
n/a
Y
Y
ShowDataLoading
Shows data loading.
BOOLEAN
True
N
N
Visible
Sets the visibility of the widget at run time.
BOOLEAN
True
Y
N
Was this helpful?