An object that defines configuration options for the dxCircularGauge widget.
Specifies animation options.
To make your gauge "live", enable animation for it by setting the enabled option of the animation object to true. In this instance, the gauge indicators will appear in motion. In addition, within the animation object, you can set an appropriate easing mode using the easing option and specify how long the animation should run using the duration option.
Use the animation | duration option instead.
Determines how long animation runs.
When animation is enabled for a gauge (see the animationEnabled option), you can set how long the animation must run. To do this, set the animationDuration option to a numeric value in milliseconds. The bigger the value, the slower the animation.
Use the animation | enabled option instead.
Indicates whether or not animation is enabled.
When this option is set to true, the value and subvalue indicators move smoothly to the specified values.
Use the subvalueIndicator option instead.
An object that defines common configuration options for gauge markers.
Use this object's properties to set options for all gauge markers at once. If you need to set an individual value for a common option, use the corresponding marker object within the markers array. Values that are set individually override the corresponding common values.
Use the valueIndicator option instead.
An object that defines the configuration options that are common for all gauge needles.
Use this object's properties to set options for all gauge needles at once. If you need to set an individual value for a common option, use the corresponding needle object within the needles array. The values that are set individually override the corresponding common values.
Use the valueIndicator option instead.
An object that defines common configuration options for gauge range bars.
Use this object's properties to set options for all gauge range bars at once. If you need to set an individual value for a common option, use the corresponding rangeBar object within the rangeBars array. Values that are set individually override the corresponding common values.
Specifies the color of the parent page element.
Set this property to the color of the parent page element. Certain elements of the widget will use this color so that they coordinate with the page. Currently, different auxiliary separators use the container background color, so there is no need to set a custom color for them.
Specifies the options required to set the geometry of the dxCircularGauge widget.
Specify the startAngle and endAngle options of the geometry configuration object to customize the shape of the circular gauge's arc. This arc is drawn from the startAngle to the endAngle as it is illustrated by the following image.
Specifies the appearance of the loading indicator.
Usually, a gauge is quick enough to draw itself instantly for a viewer. There are, however, cases, when the gauge takes longer to be drawn. In such cases, it is recommended that the loading indicator is displayed. Use the gauge's showLoadingIndicator() and hideLoadingIndicator() methods to manage the loading indicator. To specify its appearance, use the loadingIndicator configuration object.
In this example, the gauge options are assigned 2000 ms after the example is loaded. Until that time the loading indicator is displayed. Its background and font are changed using the backgroundColor and font options respectively. Take note that these options should be specified at design-time so that the changes are applied at the right time.
Specifies the blank space in pixels between the widget's extreme elements and the boundaries of the area provided for the widget (see size).
Set the required values for the left, right, top and bottom margins using the margin object's corresponding properties.
Use the subvalues option instead.
Specifies options for the gauge's marker(s).
A marker is a small pointer that indicates a fixed value on a scale. If you need to mark a single value, assign an object defining a marker to the markers configuration object. In the marker's object, specify the value to be indicated, and define the marker's appearance and location.
If you need to indicate several values on a scale, specify markers as an array of objects defining markers. If you need to set similar values to properties of several markers, use the commonMarkerSettings configuration object. It exposes the properties that can be specified for all markers at once. Note that the values specified for a marker individually (in the markers array) override the values that are specified for all markers (in the commonMarkerSettings object).
To define a marker individually, use the properties listed in the markers object. In addition, any property of the commonMarkerSettings configuration object can be added to the marker's individual definition. For example, even though a common type is specified in the commonMarkerSettings, an individual type can be specified for each marker.
Use the value option instead.
Specifies options for the gauge's needle(s).
A needle is used to indicate a current value in the gauge. If you need to indicate a single value, assign an object defining a needle to the needles configuration object. In the needle's object, specify the value to be indicated, and define the needle's appearance and location.
If you need to indicate several values on a scale, specify needles as an array of objects defining needles. If you need to set similar values to properties of several needles, use the commonNeedleSettings configuration object. It exposes the properties that can be specified for all needles at once. Note that the values specified for a needle individually (in the needles array) override the values that are specified for all needles (in the commonNeedleSettings object).
To define a needle individually, use the properties listed in the needles object. In addition, any property of the commonNeedleSettings configuration object can be added to the needle's individual definition. For example, even though a common type is specified in the commonNeedleSettings, an individual type can be specified for each needle.
Notifies a widget that it is embedded into the HTML page that uses a path modifier.
Use a combination of the valueIndicator | type and subvalueIndicator | type options instead.
Sets the name of the preset to be used in the dxCircularGauge widget.
Presets are used to specify the type of the gauge needles, markers and range bars. Each preset uses a needle/range bar and a marker. The following presets are defined.
- preset1: rectangeNeedle + textCloud
- preset2: twoColorNeedle + triangle
- preset3: rangeBar + triangle
Use the value option instead.
Specifies options for the gauge's range bar(s).
A range bar is a filled sector that represents a specific interval (e.g., working hours). If you need to show a single range bar, assign an object defining this range bar to the rangeBars configuration object. In the range bar's object, specify the bar boundaries and define the bar's appearance and location.
If you need to show several range bars, specify rangeBars as an array of objects defining range bars. If you need to set similar values to properties of several range bars, use the commonRangeBarSettings configuration object. It exposes the properties that can be specified for all range bars at once. Note that the values specified for a range bar individually (in the rangeBars array) override the values that are specified for all range bars (in the commonRangeBarSettings object).
To define a range bar individually, use the properties listed in the rangeBars object. In addition, any property of the commonRangeBarSettings configuration object can be added to the range bar's individual definition. For example, even though a common offset is specified in the commonRangeBarSettings, an individual offset can be specified for each range bar.
Specifies gauge range container options.
For the purpose of more intelligible data visualization, you can combine values into ranges and color each range differently. For instance, you can indicate the range of warm and cold temperatures. To set the ranges, assign an array of objects defining the ranges to the ranges property of the rangeContainer configuration object. In addition, you can specify the orientation of the ranges relative to an invisible scale line, and an offset from this line using the rangeContainer properties.
In this example, a number of options within the rangeContainer configuration object is changed. The range container is divided into ranges that are defined by the ranges option. These ranges are moved from the scale to a 5-pixel distance using the offset option. In addition, the backgroundColor option is set to firebrick.
Indicates whether to redraw the gauge when the size of the parent browser window changes or a mobile device is rotated.
The size of a gauge never changes when its container has a fixed size. Alternatively, its size changes proportionally when the parent window size changes and the redrawOnResize is set to true.
Specifies a gauge's scale options.
To divide a scale, set its startValue and endValue properties. The scale's major and minor ticks will be calculated automatically, so that the tick labels do not overlap each other. Major ticks will be shown by default. To show minor ticks, set their visible property to true. You can set custom major and minor tick intervals, show custom major and minor ticks, and format tick labels. These and other scale options are available in the scale configuration object.
Specifies the size of the widget in pixels.
The widget occupies the entire area of the parent container (division). If the container size (width or height) is set to zero, the widgets are not displayed.
To set the widget to a specific size that differs from the container size, use the size configuration object. Assign a height and width in pixels to the height and width properties.
Use the options of the valueIndicator configuration object instead.
Specifies options for the CircularGauge spindle.
A spindle is a base for CircularGauge needles. A spindle is always positioned at the center of the CircularGauge. You can set its visibility, size and color using the spindle configuration object.
Specifies a subtitle for the widget.
Use this property to set the text to be displayed as a gauge subtitle (the text below the title). If you need to specify the subtitle's font, assign an object to the subtitle property with the required options specified. In this instance, set the subtitle's text using the text property. When text is not specified for a subtitle, the widget is displayed without a subtitle.
Specifies the appearance options of subvalue indicators.
The dxCircularGauge widget can display one main value and several subvalues. The gauge's main value and subvalues are indicated by special pointers. You can customize the appearance of these pointers using the valueIndicator and subvalueIndicator configuration objects correspondingly.
The subvalue indicator is a pointer which designates an extra value on a scale. Subvalue indicators can be of two types: triangleMarker and textCloud. Different options of the subvalueIndicator configuration object can be used for each type. If you use the triangleMarker indicator, you can set the length and width options. If you use the textCloud indicator, the arrowLength and text options become available. The color and offset options can be used with an indicator of any type.
Specifies a set of subvalues to be designated by the subvalue indicators.
In addition to one main value, you can indicate several extra values on a gauge. These are called subvalues. To specify the subvalues, assign an array with them to the subvalues field.
You can obtain and change the subvalues at runtime. In order to do this, use the subvalues() and subvalues(subvalues) methods.
Subvalues are designated by subvalue indicators. You can customize the appearance of these indicators using the subvalueIndicator configuration object.
Specifies the name of the theme to be applied.
Use this option to specify the name of the theme that should be applied to the widget. For information on customizing and implementing themes, refer to the Themes topic.
In this example, a custom theme is implemented and applied to a gauge. In addition, you can change the type of the value indicator using the drop-down menu under the gauge. Note that options for the value indicator of each type are specified in separate objects within the gauge | valueIndicator configuration object.
Specifies a title for the gauge.
Use this property to set the text for the gauge title. If you need to specify the title's position on the widget, assign an object to the title property with the required title options specified. In this instance, set the title text using the text property. When title text is not specified, the widget is displayed without a title.
You can also place details on the gauge below the title. To do this, specifiy the subtitle configuration option.
Specifies tooltip options for the gauge.
A tooltip is a small pop-up rectangle that displays the value of the indicator that is currently hovered over. You can enable or disable tooltips, format or customize the displayed text, and change the default appearance. Use the properties of the tooltip configuration object to do this.
Specifies the main value on a gauge.
The main value is designated by the value indicator. To customize the appearance of the value indicator, use the valueIndicator configuration object.
You can obtain and change the gauge value at runtime. In order to do this, use the value() and value(value) methods.
Only one main value can be indicated on a gauge. Besides the main gauge value, you can indicate several extra values. Refer to the subvalues option description for more information.
Specifies the appearance options of the value indicator.
The value indicator is a pointer which designates the main value of the gauge. There are four types of value indicators in the dxCircularGauge widget: rectangleNeedle, triangleNeedle, twoColorNeedle and rangeBar. Different options of the valueIndicator configuration object can be used for each type. Refer to the type option description for information on the available options by types.
In this example, several options of the valueIndicator configuration object are changed. Here, the gauge value is indicated by a two-color needle. The appearance of this needle is customized using the color, secondColor and width options. In addition, the look of the spindle is altered using the spindleSize and spindleGapSize options.