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: CustomType<servoyextra-gauge.AnimationOptions>

---

borderOptions

Type: CustomType<servoyextra-gauge.BorderOptions>

---

colorOptions

Type: CustomType<servoyextra-gauge.ColorOptions>

---

fontOptions

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

Type: Array<CustomType<servoyextra-gauge.Highlight>>

---

linearGaugeOptions

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

Type: CustomType<servoyextra-gauge.NeedleOptions>

---

radialGaugeOptions

Type: CustomType<servoyextra-gauge.RadialGaugeOptions>

---

ticks

Type: CustomType<servoyextra-gauge.TickOptions>

---

title

Type: CustomType<servoyextra-gauge.TitleOptions>

---

units

Type: String

---

value

Type: Dataprovider

---

valueBoxOptions

Type: CustomType<servoyextra-gauge.ValueBoxOptions>

---

Types

AnimationOptions

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

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

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

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

scripting type: CustomType<servoyextra-gauge.Highlight>

• color

  • Type: color

• from

  • Type: int

  • Default Value: 0

• to

  • Type: int

  • Default Value: 0

LinearGaugeOptions

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

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

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

scripting type: CustomType<servoyextra-gauge.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

scripting type: CustomType<servoyextra-gauge.TitleOptions>

• dataProviderID

  • Type: dataprovider

• displaysTags

  • Type: boolean

• format

  • Type: format

• text

  • Type: string

ValueBoxOptions

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

---