Search results

CircularGauge

Represents the circular gauge control.

<div id="gauge"/>
<script>
  var gaugeObj = new CircularGauge();
  gaugeObj.appendTo("#gauge");
</script>

Properties

allowImageExport

boolean

Enables and disables the export to image functionality in circular gauge.

Defaults to false

allowPdfExport

boolean

Enables and disables the export to pdf functionality in circular gauge.

Defaults to false

allowPrint

boolean

Enables and disables the print functionality in circular gauge.

Defaults to false

annotationsModule

Annotations

Sets and gets the module that is used to add annotation in the circular gauge.

axes

AxisModel[]

Sets and gets the options for customizing the axes of circular gauge.

background

string

Sets and gets the background color of the gauge. This property accepts value in hex code, rgba string as a valid CSS color string.

Defaults to null

border

BorderModel

Sets and gets the options for customizing the color and width of the gauge border.

centerX

string

Sets and gets the X coordinate of the circular gauge.

Defaults to null

centerY

string

Sets and gets the Y coordinate of the circular gauge.

Defaults to null

description

string

Sets and gets the information about gauge for assistive technology.

Defaults to null

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePointerDrag

boolean

Enables and disables drag movement of the pointer in the circular gauge.

Defaults to false

enableRangeDrag

boolean

Enables and disables the drag movement of the ranges in the circular gauge.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

height

string

Sets and gets the height of the circular 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

legendModule

Legend

Sets and gets the module that is used to manipulate and add legend to the circular gauge.

legendSettings

LegendSettingsModel

Sets and gets the options for customizing the legend of the circular gauge.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

margin

MarginModel

Sets and gets the options to customize the left, right, top and bottom margins of the circular gauge.

moveToCenter

boolean

Enables and disables to place the half or quarter circle in center position, if values not specified for centerX and centerY.

Defaults to false

tabIndex

number

Sets and gets the tab index value for the circular gauge.

Defaults to 1

theme

string

Sets and gets the themes supported for circular gauge.

Defaults to Material

title

string

Sets and gets the title for circular gauge.

Defaults to

titleStyle

FontModel

Sets and gets the options for customizing the title for circular gauge.

tooltip

TooltipSettingsModel

Sets and gets the options for customizing the tooltip of gauge.

tooltipModule

GaugeTooltip

Sets and gets the module that is used to show the tooltip in the circular gauge.

useGroupingSeparator

boolean

Enables and disables the grouping separator should be used for a number.

Defaults to false

width

string

Sets and gets the width of the circular 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.

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

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

To destroy the widget

Returns void

export

This method is used to perform the export functionality for the circular gauge.

Parameter Type Description
type string Specifies the type of the export.
fileName string Specifies the file name for the exported file.
orientation (optional) PdfPageOrientation Specified the orientation for the exported pdf document.
allowDownload (optional) boolean Specifies whether to download as a file.

Returns Promise

getRootElement

Returns the route element of the component

Returns HTMLElement

print

This method is used to print the rendered circular gauge.

Parameter Type Description
id (optional) string[] | string | Element Specifies the element to print the circular 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.

Returns void

setAnnotationValue

This method is used to set the annotation content dynamically for circular gauge.

Returns void

setPointerValue

This method is used to set the pointer value dynamically for circular gauge.

Parameter Type Description
axisIndex number Specifies the index value for the axis in circular gauge.
pointerIndex number Specifies the index value for the pointer in circular gauge.
value number Specifies the value for the pointer in circular gauge.

Returns void

setRangeValue

This method is used to set the range values dynamically for circular gauge.

Parameter Type Description
axisIndex number Specifies the index value for the axis in circular gauge.
rangeIndex number Specifies the index value for the range in circular gauge.
start number Specifies the start value for the current range in circular gauge.
end number Specifies the end value for the current range i circular gauge.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

animationComplete

EmitType<IAnimationCompleteEventArgs>

Triggers after the animation gets completed for pointers.

annotationRender

EmitType<IAnnotationRenderEventArgs>

Triggers before each annotation for the circular gauge gets rendered.

axisLabelRender

EmitType<IAxisLabelRenderEventArgs>

Triggers before each axis label gets rendered.

beforePrint

EmitType<IPrintEventArgs>

Triggers before the prints 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 on mouse down.

gaugeMouseLeave

EmitType<IMouseEventArgs>

Triggers while cursor leaves the circular gauge.

gaugeMouseMove

EmitType<IMouseEventArgs>

Triggers on hovering the circular gauge.

gaugeMouseUp

EmitType<IMouseEventArgs>

Triggers on mouse up.

legendRender

EmitType<ILegendRenderEventArgs>

Triggers before each legend for the circular gauge gets rendered.

load

EmitType<ILoadedEventArgs>

Triggers before the circular gauge gets loaded.

loaded

EmitType<ILoadedEventArgs>

Triggers after the circular gauge gets loaded.

radiusCalculate

EmitType<IRadiusCalculateEventArgs>

Triggers before the radius for the circular gauge gets calculated.

resized

EmitType<IResizeEventArgs>

Triggers after window resize.

tooltipRender

EmitType<ITooltipRenderEventArgs>

Triggers before the tooltip for pointer of the circular gauge gets rendered.