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

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

  • 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

  • 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>

ValueBoxOptions

scripting type: CustomType<servoyextra-gauge.ValueBoxOptions>

  • valueBox