Search results

CircularGauge

Represents the circular gauge control. This is used to customize the properties of the circular gauge to visualize the data in circular scale.

<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

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

allowRangePreRender

boolean

Allow the range element to be rendered ahead of the axis element, when this property is set to “true”.

Defaults to true

animationDuration

number

Sets and gets the duration of animation in milliseconds in circular gauge.

Defaults to 0

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 style properties of the gauge border.

centerX

string

Sets and gets the X coordinate of the center of the circular gauge.

Defaults to null

centerY

string

Sets and gets the Y coordinate of the center 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

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 placing the half or quarter circle in center, if centerX and centerY properties are not specified.

Defaults to false

tabIndex

number

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

Defaults to 0

theme

GaugeTheme

Sets and gets the theme styles supported for circular gauge. When the theme is set, the styles associated with the theme will be set in the 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.

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.

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 circular gauge. This method removes the events associated with the circular gauge and disposes the objects created for rendering and updating the circular gauge.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

export

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

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

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

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.

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 content dynamically for circular gauge.

Parameter Type Description
axisIndex number Specifies the index value for the axis in circular gauge.
annotationIndex number Specifies the index value for the annotation in circular gauge.
content string | Function Specifies the content for the annotation in 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 in circular gauge.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

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 when mouse up action is performed over the circular gauge.

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 to notify the resize of the circular gauge when the window is resized.

tooltipRender

EmitType<ITooltipRenderEventArgs>

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