Gauge
(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
This is a reference page; many components have detailed usage guides here.
Properties
animationOptions
Animation options for the gauge. Configures behavior such as duration, animation rule, and animated value settings. Type: CustomType<servoyextra-gauge.AnimationOptions>
borderOptions
Border options for the gauge. Configures the widths and styles of the gauge borders. Type: CustomType<servoyextra-gauge.BorderOptions>
colorOptions
Color options for the gauge. Defines colors for the gauge plate, ticks, needle, borders, and other elements. Type: CustomType<servoyextra-gauge.ColorOptions>
fontOptions
Font options for the gauge. Defines fonts for tick numbers, title, units, and the value text. Type: CustomType<servoyextra-gauge.FontOptions>
gaugeType
The type of gauge to display. A linear gauge is similar to a thermometer and a radial gauge is like a speedometer Type: String Default Value: "radial"
highlights
An array of highlight definitions, specifying ranges to be emphasized on the gauge. Type: Array<CustomType<servoyextra-gauge.Highlight>>
linearGaugeOptions
Options specific to a linear gauge layout, such as bar length and tick placement. Type: CustomType<servoyextra-gauge.LinearGaugeOptions>
maxValue
The maximum value for the gauge Type: Number Default Value: 100
minValue
The minimum value for the gauge Type: Number Default Value: 0
needleOptions
Needle options for the gauge. Configures the appearance and behavior of the gauge needle. Type: CustomType<servoyextra-gauge.NeedleOptions>
radialGaugeOptions
Options specific to a radial gauge layout, such as angles and circular configurations. Type: CustomType<servoyextra-gauge.RadialGaugeOptions>
ticks
Tick options for the gauge. Defines major and minor ticks along the gauge scale. Type: CustomType<servoyextra-gauge.TickOptions>
title
The title configuration for the gauge, including text, font, and styling options. Type: CustomType<servoyextra-gauge.TitleOptions>
units
The unit of measurement displayed on the gauge (e.g., °C, %, etc.). Type: String
value
The current value displayed on the gauge, bound to a data provider. Type: Dataprovider
valueBoxOptions
Options for the value box, which displays the gauge's value with optional formatting. Type: CustomType<servoyextra-gauge.ValueBoxOptions>
Types
AnimationOptions
Represents animation settings for the gauge, such as duration and animation behavior. scripting type: CustomType<servoyextra-gauge.AnimationOptions>
animateOnInit
Flag to indicate if the guage should be animated on first draw
Type: boolean
Default Value: true
animatedValue
Flag to indicate if the value should be constantly updated during the animation
Type: boolean
Default Value: false
animation
Flag to indicate if animations are enabled
Type: boolean
Default Value: true
animationDuration
Time in milliseconds of the animation duration
Type: int
Default Value: 500
animationRule
The type of animation behaviour for the guage
Type: string
Default Value: "linear"
BorderOptions
Represents configuration options for the gauge borders. scripting type: CustomType<servoyextra-gauge.BorderOptions>
borderInnerWidth
Sets the inner width of the border in pixels. If 0, then no border will be drawn
Type: int
borderMiddleWidth
Sets the middle width of the border in pixels. If 0, then no border will be drawn
Type: int
borderOuterWidth
Sets the outer width of the border in pixels. If 0, then no border will be drawn
Type: int
borderShadowWidth
Sets the width of the outer border drop shadow. If 0, then no shadow will be drawn
Type: int
borders
Flag to indicate if borders should be drawn
Type: boolean
Default Value: true
ColorOptions
Represents color configuration for various gauge elements. scripting type: CustomType<servoyextra-gauge.ColorOptions>
colorBar
Defines the background color of the bar
Type: color
colorBarProgress
Defines the color of the progress bar
Type: color
colorBarStroke
Defines the color of the bar stroke
Type: color
colorBorderInner
Defines the color of the inner border for the gauge plate
Type: color
colorBorderInnerEnd
This value and the main border outer colour can be used to specify a gradient for the inner border
Type: color
colorBorderMiddle
Defines the color of the middle border for the gauge plate
Type: color
colorBorderMiddleEnd
This value and the main border middle colour can be used to specify a gradient for the middle border
Type: color
colorBorderOuter
Defines the color of the outer border for the gauge plate
Type: color
colorBorderOuterEnd
This value and the main border outer colour can be used to specify a gradient for the outer border
Type: color
colorMajorTicks
Color of the major tick marks
Type: color
Default Value: "#444"
colorMinorTicks
Color of the minor tick marks
Type: color
Default Value: "#666"
colorNeedle
Color of the needle
Type: color
Default Value: "rgba(240,128,128,1)"
colorNeedleEnd
This value and the main needle colour can be used to specify a gradient for the needle
Type: color
Default Value: "rgba(255,160,122,.9)"
colorNeedleShadowDown
Defines the lower half of the needle shadow color
Type: color
colorNeedleShadowUp
Defines the upper half of the needle shadow color
Type: color
colorNumbers
Color of the numbers on the ticks
Type: color
Default Value: "#444"
colorPlate
The background color for the gauge
Type: color
Default Value: "#fff"
colorPlateEnd
The end background color for the gauge. If specified will give a gradient effect to the gauge
Type: color
colorTitle
Color of the title
Type: color
Default Value: "#888"
colorUnits
Color of the units
Type: color
colorValueBoxBackground
Defines the color of the background for the value box
Type: color
colorValueBoxRect
Defines the color of the value box rectangle stroke
Type: color
colorValueBoxRectEnd
This value and the main value box rectangle colour can be used to specify a gradient for the value box rectangle
Type: color
colorValueBoxShadow
Defines the color of the shadow for the value box. If not specified then there will be no shadow
Type: color
colorValueText
Color of the value text
Type: color
Default Value: "#444"
colorValueTextShadow
Color of the value text shadow. If not specified then there will be no shadow
Type: color
Default Value: "rgba(0,0,0,0.3)"
FontOptions
Represents font configuration options for gauge elements. scripting type: CustomType<servoyextra-gauge.FontOptions>
fontNumbers
The font family to be used for the tick numbers
Type: string
fontNumbersSize
The font size to be used for the tick numbers in relative units
Type: int
fontNumbersStyle
The font style to be used for the tick numbers
Type: string
Default Value: "normal"
fontNumbersWeight
The font weight to be used for the tick numbers
Type: string
Default Value: "normal"
fontTitle
The font family to be used for the title text
Type: string
fontTitleSize
The font size to be used for the title in relative units
Type: int
fontTitleStyle
The font style to be used for the title
Type: string
Default Value: "normal"
fontTitleWeight
The font weight to be used for the title
Type: string
Default Value: "normal"
fontUnits
The font family to be used for the units
Type: string
fontUnitsSize
The font size to be used for the units in relative units
Type: int
fontUnitsStyle
The font style to be used for the units
Type: string
Default Value: "normal"
fontUnitsWeight
The font weight to be used for the units
Type: string
Default Value: "normal"
fontValue
The font family to be used for the value
Type: string
fontValueSize
The font size to be used for the value in relative units
Type: int
fontValueStyle
The font style to be used for the value
Type: string
Default Value: "normal"
fontValueWeight
The font weight to be used for the value
Type: string
Default Value: "normal"
Highlight
Represents a gauge highlight range with starting and ending values and a specific color. scripting type: CustomType<servoyextra-gauge.Highlight>
color
The color to be used for the highlight range.
Type: color
from
The starting value of the highlight range.
Type: int
Default Value: 0
to
The ending value of the highlight range.
Type: int
Default Value: 0
LinearGaugeOptions
Represents configuration options specific to a linear gauge layout. scripting type: CustomType<servoyextra-gauge.LinearGaugeOptions>
barBeginCircle
Defines if a gauge bar should start with a circle element imitating flask view of the bar. If set to zero it won’t be drawn at all
Type: int
barLength
Defines bar length (in percent) in relation to overall gauge length
Type: int
borderRadius
The radius for rounded corners of the gauge plate and its borders
Type: int
colorBarEnd
If given, bar background will be drawn as gradient. If null or undefined, bar color will be solid
Type: int
colorBarProgressEnd
If given, progress bar background will be drawn as gradient. If null or undefined, progress bar color will be solid
Type: int
needleSide
Defines a side on which the needle should be drawn
Type: string
Default Value: "both"
numbersSide
Defines a side on which the numbers should be drawn
Type: string
Default Value: "both"
tickSide
Defines a side on which ticks bar should be drawn
Type: string
Default Value: "both"
ticksPadding
Defines a padding used for drawing ticks out of a bar, in relative units
Type: int
ticksWidth
Defines a length of major ticks width in relative units
Type: int
ticksWidthMinor
Defines a length of minor tick lines width in relative units
Type: int
NeedleOptions
Represents configuration options for the gauge needle. scripting type: CustomType<servoyextra-gauge.NeedleOptions>
needle
Flag to indicate if the needle should be drawn
Type: boolean
Default Value: true
needleShadow
Flag to indicate if the needle shadow should be drawn
Type: boolean
Default Value: true
needleType
Can be either 'line' or 'arrow'
Type: string
Default Value: "arrow"
RadialGaugeOptions
Represents configuration options specific to a radial gauge layout. scripting type: CustomType<servoyextra-gauge.RadialGaugeOptions>
animationTarget
Defines which part of the gauge should be animated when changing the value
Type: string
Default Value: "needle"
barStartPosition
Enable anti-clockwise progress bars and middle start point progress bars
Type: string
Default Value: "left"
colorNeedleCircleInner
Defines a color which should be used to draw inner decorative circle element at the middle of the gauge
Type: color
colorNeedleCircleInnerEnd
: If defined, inner decorative circle gauge element will be drawn as gradient. If falsy - inner circle will be drawn using solid color
Type: color
colorNeedleCircleOuter
Defines a color which should be used to draw outer decorative circle element at the middle of the gauge
Type: color
colorNeedleCircleOuterEnd
: If defined, outer decorative circle gauge element will be drawn as gradient. If falsy - outer circle will be drawn using solid color
Type: color
needleCircleInner
Turns on/off inner decorative circle element drawing
Type: boolean
Default Value: true
needleCircleOuter
Turns on/off outer decorative circle element drawing
Type: boolean
Default Value: true
needleCircleSize
Defines the size in relative units of the decorative circles element of the gauge
Type: int
Default Value: 45
startAngle
Defines a start angle for the start of the ticks bar
Type: int
Default Value: 45
ticksAngle
Defines a max angle for ticks bar
Type: int
Default Value: 270
useMinPath
Applicable only to radial gauges which have full 360-degree ticks plate. If set to true, the gauge will rotate needle/plate by a minimal rotation path
Type: boolean
Default Value: true
TickOptions
Represents configuration options for gauge ticks including major and minor tick settings. scripting type: CustomType<servoyextra-gauge.TickOptions>
exactTicks
Flag indicating whether the provided major tick values should be used exactly as specified.
Type: boolean
Default Value: false
highlightsWidth
Sets the width of highlights area in relative units
Type: int
Default Value: 15
majorTicks
An array of numeric or string values which will be displayed on a gauge bar as major ticks. This array values define the labels for the ticks. The length of the array defines a number of sections on a ticks bar.
Type: string[]
Default Value: ["0","20","40","60","80","100"]
majorTicksDec
The Number of digits for the decimal part of the tick number
Type: int
majorTicksInt
The Number of digits for the integer part of the tick number
Type: int
minorTicks
How many divisions to draw between two neighbour major ticks.
Type: int
Default Value: 10
strokeTicks
Should the ticks bar of the gauge be stroked or not
Type: boolean
Default Value: true
TitleOptions
Represents configuration options for the gauge title. scripting type: CustomType<servoyextra-gauge.TitleOptions>
dataProviderID
A data provider for dynamic title content.
Type: dataprovider
displaysTags
Determines if formatting tags are applied to the title text.
Type: boolean
format
Specifies the formatting rules for the title text.
Type: format
text
The title text to display on the gauge.
Type: string
ValueBoxOptions
Represents configuration options for the gauge value box. scripting type: CustomType<servoyextra-gauge.ValueBoxOptions>
valueBox
Flag to indicate if the value box should be shown or not
Type: boolean
Default Value: true
valueDec
Number of digits for the decimal part of the value
Type: int
Default Value: 2
valueInt
Number of digits for the integer part of the value
Type: int
Default Value: 3
Last updated
Was this helpful?