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

---