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> boolean
Enables and disables the export to image functionality in circular gauge.
Defaults to false
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
boolean
Enables and disables the export to pdf functionality in circular gauge.
Defaults to false
boolean
Enables and disables the print functionality in circular gauge.
Defaults to false
boolean
Allow the range element to be rendered ahead of the axis element, when this property is set to “true”.
Defaults to true
number
Sets and gets the duration of animation in milliseconds in circular gauge.
Defaults to 0
Sets and gets the options for customizing the axes of circular gauge.
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
Sets and gets the options for customizing the style properties of the gauge border.
string
Sets and gets the X coordinate of the center of the circular gauge.
Defaults to null
string
Sets and gets the Y coordinate of the center of the circular gauge.
Defaults to null
string
Sets and gets the information about gauge for assistive technology.
Defaults to null
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enables and disables drag movement of the pointer in the circular gauge.
Defaults to false
boolean
Enables and disables the drag movement of the ranges in the circular gauge.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
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
Sets and gets the options for customizing the legend of the circular gauge.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Sets and gets the options to customize the left, right, top and bottom margins of the circular gauge.
boolean
Enables and disables placing the half or quarter circle in center, if centerX and centerY properties are not specified.
Defaults to false
number
Sets and gets the tab index value for the circular gauge.
Defaults to 0
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
string
Sets and gets the title for circular gauge.
Defaults to ”
Sets and gets the options for customizing the title for circular gauge.
Sets and gets the options for customizing the tooltip of gauge.
boolean
Enables and disables the grouping separator should be used for a number.
Defaults to false
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
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
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
Adding unload event to persist data when enable persistence true
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
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
Removing unload event to persist data when enable persistence true
Returns void
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
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
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
Applies all the pending property changes and render the component again.
Returns void
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
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
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
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
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
EmitType<IAnimationCompleteEventArgs>
Triggers after the animation gets completed for pointers.
EmitType<IAnnotationRenderEventArgs>
Triggers before each annotation for the circular gauge gets rendered.
EmitType<IAxisLabelRenderEventArgs>
Triggers before each axis label gets rendered.
Triggers before the prints gets started.
EmitType<IPointerDragEventArgs>
Triggers after the pointer is dragged.
EmitType<IPointerDragEventArgs>
Triggers while dragging the pointers.
EmitType<IPointerDragEventArgs>
Triggers before the pointer is dragged.
Triggers on mouse down.
Triggers while cursor leaves the circular gauge.
Triggers on hovering the circular gauge.
Triggers when mouse up action is performed over the circular gauge.
EmitType<ILegendRenderEventArgs>
Triggers before each legend for the circular gauge gets rendered.
Triggers before the circular gauge gets loaded.
Triggers after the circular gauge gets loaded.
EmitType<IRadiusCalculateEventArgs>
Triggers before the radius for the circular gauge gets calculated.
Triggers to notify the resize of the circular gauge when the window is resized.
EmitType<ITooltipRenderEventArgs>
Triggers before the tooltip for pointer of the circular gauge gets rendered.