LinearGauge
23 Sep 20259 minutes to read
Represents the linear gauge control. This is used to customize the properties of the linear gauge to visualize the data in linear scale.
<div id="container"/>
<script>
var gaugeObj = new LinearGauge({ });
gaugeObj.appendTo("#container");
</script>Properties
allowImageExport boolean
Enables or disables the export to image functionality in linear gauge.
Defaults to false
allowMargin boolean
Enables or disables the ability of the gauge to be rendered to the complete width. The left, right, top and bottom spacing will not be considered in the gauge when this property is disabled.
Defaults to true
allowPdfExport boolean
Enables or disables the export to PDF functionality in linear gauge.
Defaults to false
allowPrint boolean
Enables or disables the print functionality in linear gauge.
Defaults to false
animationDuration number
Defines the duration of the loading animation in linear gauge, which animates the
axis line, ticks, axis labels, ranges, pointers, and annotations. The value of this property will be in milliseconds.
Defaults to 0
annotations AnnotationModel[]
Specifies the options for customizing the annotation of linear gauge.
axes AxisModel[]
Specifies the options for customizing the axis in linear gauge.
background string
Specifies the background color of the gauge. This property accepts value in hex code, rgba string as a valid CSS color string.
Defaults to ‘transparent’
border BorderModel
Specifies the options for customizing the style properties of the border for linear gauge.
container ContainerModel
Specifies the options for customizing the container in linear gauge.
description string
Sets and gets the information about gauge for assistive technology.
Defaults to null
edgeLabelPlacement LabelPlacement
Specifies the placement of the label in linear gauge.
Defaults to None
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
format string
Specifies the format to apply for internationalization in linear gauge.
Defaults to null
height string
Specifies the height of the linear gauge as a string in order to provide input as both like ‘100px’ or ‘100%’.
If specified as ‘100%, gauge will render to the full height of its parent element.
Defaults to null
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
margin MarginModel
Specifies the options to customize the margins of the linear gauge.
orientation Orientation
Specifies the orientation of the rendering of the linear gauge.
Defaults to Vertical
rangePalettes string[]
Specifies the color palette for axis ranges in linear gauge.
Defaults to []
tabIndex number
Specifies the tab index value for the linear gauge.
Defaults to 0
theme LinearGaugeTheme
Sets and gets the theme styles supported for linear gauge. When the theme is set, the styles associated with the theme will be set in the gauge.
Defaults to Material
title string
Specifies the title for linear gauge.
titleStyle FontModel
Specifies the options for customizing the appearance of title for linear gauge.
tooltip TooltipSettingsModel
Specifies the options for customizing the tooltip in linear gauge.
useGroupingSeparator boolean
Enables or disables a grouping separator should be used for a number.
Defaults to false
width string
Specifies the width of the linear gauge as a string in order to provide input as both like ‘100px’ or ‘100%’.
If specified as ‘100%, gauge will render to the full width of its parent element.
Defaults to null
Methods
addEventListener
Adds the handler to the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event |
| handler | Function |
Specifies the call to run when the event occurs. |
Returns void
appendTo
Appends the control within the given HTML element
| Parameter | Type | Description |
|---|---|---|
| selector (optional) |
string | HTMLElement
|
Target element where control needs to be appended |
Returns void
attachUnloadEvent
Adding unload event to persist data when enable persistence true
Returns void
dataBind
When invoked, applies the pending property changes immediately to the component.
Returns void
destroy
This method destroys the linear gauge. This method removes the events associated with the linear gauge and disposes the objects created for rendering and updating the linear gauge.
Returns void
detachUnloadEvent
Removing unload event to persist data when enable persistence true
Returns void
export
This method handles the export functionality for linear gauge.
| Parameter | Type | Description |
|---|---|---|
| type | ExportType |
Specifies the extension type of the exported document. |
| fileName | string |
Specifies file name for exporting the rendered Linear Gauge. |
| orientation (optional) | PdfPageOrientation |
Specifies the orientation of the PDF document. |
| allowDownload (optional) | boolean |
Specifies whether the exported file should be downloaded or not. |
Returns Promise
getLocalData
Returns the persistence data for component
Returns any
getRootElement
Returns the route element of the component
Returns HTMLElement
handleUnload
Handling unload event to persist data when enable persistence true
Returns void
This method handles the print functionality for linear gauge.
| Parameter | Type | Description |
|---|---|---|
| id (optional) |
string[] | string | Element
|
Specifies the element to print the linear gauge. |
Returns void
refresh
Applies all the pending property changes and render the component again.
Returns void
removeEventListener
Removes the handler from the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event to remove |
| handler | Function |
Specifies the function to remove |
Returns void
setAnnotationValue
This method is used to set the annotation value in the linear gauge.
| Parameter | Type | Description |
|---|---|---|
| annotationIndex | number |
Specifies the index value for the annotation in linear gauge. |
| content |
string | Function
|
Specifies the content for the annotation in linear gauge. |
| axisValue (optional) | number |
Specifies the axis value to which the annotation must be positioned. |
Returns void
setPointerValue
This method is used to set the pointer value in the linear gauge.
| Parameter | Type | Description |
|---|---|---|
| axisIndex | number |
Specifies the index of the axis. |
| pointerIndex | number |
Specifies the index of the pointer. |
| value | number |
Specifies the pointer value. |
Returns void
Inject
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
Events
animationComplete EmitType<IAnimationCompleteEventArgs>
Triggers after completing the animation for pointer.
annotationRender EmitType<IAnnotationRenderEventArgs>
Triggers before each annotation gets rendered.
axisLabelRender EmitType<IAxisLabelRenderEventArgs>
Triggers before each axis label gets rendered.
beforePrint EmitType<IPrintEventArgs>
Triggers before the print functionality gets started.
dragEnd EmitType<IPointerDragEventArgs>
Triggers after the pointer is dragged.
dragMove EmitType<IPointerDragEventArgs>
Triggers while dragging the pointers.
dragStart EmitType<IPointerDragEventArgs>
Triggers before the pointer is dragged.
gaugeMouseDown EmitType<IMouseEventArgs>
Triggers when performing the mouse down operation on gauge area.
gaugeMouseLeave EmitType<IMouseEventArgs>
Triggers when performing the mouse leave operation from the gauge area.
gaugeMouseMove EmitType<IMouseEventArgs>
Triggers when performing the mouse move operation on gauge area.
gaugeMouseUp EmitType<IMouseEventArgs>
Triggers when performing mouse up operation on gauge area.
load EmitType<ILoadEventArgs>
Triggers before the gauge gets rendered.
loaded EmitType<ILoadedEventArgs>
Triggers after the gauge gets rendered.
resized EmitType<IResizeEventArgs>
Triggers to notify the resize of the linear gauge when the window is resized.
tooltipRender EmitType<ITooltipRenderEventArgs>
Triggers before the tooltip get rendered.
valueChange EmitType<IValueChangeEventArgs>
Triggers while changing the value of the pointer by UI interaction.