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
Type: AnimationOptions
borderOptions
Type: BorderOptions
colorOptions
Type: ColorOptions
fontOptions
Type: 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
Type: Highlight[]
linearGaugeOptions
Type: LinearGaugeOptions
maxValue
The maximum value for the gauge
Type: int Default Value: 100
minValue
The minimum value for the gauge
Type: int Default Value: 0
needleOptions
Type: NeedleOptions
radialGaugeOptions
Type: RadialGaugeOptions
ticks
Type: TickOptions
title
Type: TitleOptions
units
Type: string
value
Type: dataprovider
valueBoxOptions
Type: ValueBoxOptions
Types
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
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
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
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
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
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
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
exactTicks
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
dataProviderID
Type: dataprovider
displaysTags
Type: boolean
format
Type: format
text
Type: string
ValueBoxOptions
Last updated