Linear gauge

About 6 min read

TwLinearGauge · Category: Other

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Value

Setting	Type	Default	Description
Process Value processValue	Value (typed)	49.9	Main value of the widget, usually bound to a Tag or an expression in Bindings.
Value Template valueTemplate	Text	{value}%	Saved for compatibility with the circular gauge; the linear gauge has no center text, so it has no visible effect.
Label Template labelTemplate	Text	{value}%	Text of the scale labels; {'{'}value{'}'} is replaced with the tick value.
Value Color valueColor	Color	#300	Saved for compatibility with the circular gauge; the linear gauge has no center text, so it has no visible effect.
Value Label Class valueLabelClass	CSS classes	font-bold text-lg	Saved for compatibility with the circular gauge; the linear gauge has no center text, so it has no visible effect.
Read Only readOnly	Checkbox	—	When on, the user cannot change the value at runtime.
Data Coverage Indicator coverageIndicator	Selection	gap	Only applies to __cons consumption snapshot bindings. Only data gaps: shows a warning icon when the period has a data gap. Gaps and partial periods: also shows a clock icon for periods that are not finished yet (today, this month). Off: no icon. Options: gap Only data gaps, all Gaps and partial periods, none Off

Scale

Setting	Type	Default	Description
Scale Start Value scaleStartValue	Number	0	Lowest value of the scale. The three color ranges are calculated between the start and end value.
Scale End Value scaleEndValue	Number	100	Highest value of the scale.
Tick Color tickColor	Color	#f2f2f2	Color of the major ticks.
Tick Interval tickInterval	Number	10	Distance between the major ticks in scale units; each major tick gets a label.
Minor Tick Color minorTickColor	Color	#d9d9d9	Color of the minor ticks.
Minor Tick Interval minorTickInterval	Number	1	Distance between the minor ticks in scale units.
Minor Tick Visible minorTickVisible	Checkbox	On	Shows the small ticks between the major ticks.
Label Indent From Tick scaleLabelIndentFromTick	Number	-2	Distance between the labels and the ticks in pixels; negative values move the labels to the other side of the scale.
Label Font Size scaleLabelFontSize	Number	12	Font size of the scale labels in pixels.
Label Font Color scaleLabelFontColor	Color	#555	Color of the scale labels.
Label Font Weight scaleLabelFontWeight	Number	200	Font weight of the scale labels, from 100 (thin) to 900 (bold).
Label Visible scaleLabelVisible	Checkbox	On	Shows the numbers at the major ticks.
Orientation orientation	Selection	vertical	Direction of the scale: Vertical or Horizontal. Options: vertical Vertical, horizontal Horizontal

Value Indicator

Setting	Type	Default	Description
Value Indicator Color valueIndicatorColor	Color	#8FBC8F	Main color of the value indicator.
Value Indicator Type valueIndicatorType	Selection	triangleMarker	Shape of the value indicator. On the linear gauge use Rectangle, Circle, Rhombus, Range Bar, Triangle Marker or Text Cloud; the needle types are for the circular gauge. Options: circle Circle, rangeBar Range Bar, rectangle Rectangle, rectangleNeedle Rectangle Needle, rhombus Rhombus, textCloud Text Cloud, triangleMarker Triangle Marker, triangleNeedle Triangle Needle, twoColorNeedle Two-Color Needle
Value Indicator Width valueIndicatorWidth	Number	8	Width of the value indicator in pixels.
Value Indicator Length valueIndicatorLength	Number	60	Length of the value indicator in pixels; not every indicator type uses it.
Value Indicator Offset valueIndicatorOffset	Number	0	Distance of the value indicator from the scale line in pixels.
Spindle Size valueIndicatorSpindleSize	Number	14	Used only by the needle types of the circular gauge; no effect on the linear gauge.
Spindle Gap Size valueIndicatorSpindleGapSize	Number	6	Used only by the needle types of the circular gauge; no effect on the linear gauge.
Second Color valueIndicatorSecondColor	Color	#cccccc	Used only by the needle types of the circular gauge; no effect on the linear gauge.
Second Fraction valueIndicatorSecondFraction	Number	0.3	Used only by the needle types of the circular gauge; no effect on the linear gauge.

Ranges & Limits

Setting	Type	Default	Description
Min Value minValue	Number	0	Position of a small limit marker on the scale; 0 hides the marker.
Max Value maxValue	Number	0	Position of a second limit marker on the scale; 0 hides the marker.
Range Container Offset rangeContainerOffset	Number	1	Distance of the colored range band from the scale in pixels.
Range Container Width rangeContainerWidth	Number	8	Thickness of the colored range band in pixels.
Range 1 Color range1Color	Color	#92000A	Color of the first range, which covers the first 30% of the scale.
Range 2 Color range2Color	Color	#E6E200	Color of the middle range, which covers the next 40% of the scale.
Range 3 Color range3Color	Color	#77DD77	Color of the last range, which covers the remaining 30% of the scale.

Behavior

Setting	Type	Default	Description
Animation Enabled animationEnabled	Checkbox	Off	Moves the indicator smoothly to a new value instead of jumping.
Animation Duration animationDuration	Number	500	Duration of the indicator animation in milliseconds (default 500); used only when the animation is on.
Tooltip Enabled tooltipEnabled	Checkbox	Off	Shows the value in a tooltip when the pointer rests on the indicator.
Redraw On Resize redrawOnResize	Checkbox	On	Redraws the gauge when the widget size changes.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, coverageIndicator, processValue, valueColor, valueTemplate, valueLabelClass, valueIndicatorColor, valueIndicatorType, valueIndicatorWidth, valueIndicatorLength, valueIndicatorOffset, valueIndicatorSpindleSize, valueIndicatorSpindleGapSize, valueIndicatorSecondColor, valueIndicatorSecondFraction, labelTemplate, readOnly, tickColor, tickInterval, minorTickColor, minorTickInterval, minorTickVisible, scaleStartValue, scaleEndValue, scaleLabelIndentFromTick, scaleLabelFontSize, scaleLabelFontColor, scaleLabelFontWeight, scaleLabelVisible, minValue, maxValue, orientation, rangeContainerOffset, rangeContainerWidth, range1Color, range2Color, range3Color, animationEnabled, animationDuration, tooltipEnabled, redrawOnResize

The style fields of the widget can also be bound as style.<field> (e.g. style.width, style.height).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.