Gauges
Description:
Gauges
Gauges is a component that measures and gives a visual display of the amount, level, or contents of something. Gauges have types in it.
Using the Color child component, you can associate colors with sections of the data to indicate specific ranges within the data, e.g., green for satisfactory, yellow for caution, and red for alarm.
Allowed Parent Components:
Card Body
Col
Horizontal Section
Vertical Section
Allowed Child Components:
Color
Pointer
Popover
Pulse
Trigger Before Render
Trigger On Click
Properties
➤ Type
Allowed Values:
{"value":"angulargauge","label":"Angular"}
{"value":"bulb","label":"Bulb"}
{"value":"cylinder","label":"Cylinder"}
{"value":"hled","label":"Horizontal LED"}
{"value":"vled","label":"Vertical LED"}
{"value":"hlineargauge","label":"Horizontal Linear"}
{"value":"thermometer","label":"Thermometer"}
{"value":"knob","label":"Knob"}
➤ Caption
Provide a title for the Chart.
Allowed Values: An expression which should return string after evaluation
➤ Sub Caption
Provide a sub title for the chart.
Allowed Values: An expression which should return string after evaluation
➤ Gauge Fill Color
This attribute sets the color for the chart. You can specify an expression which evaluates to hex color code as the value of this attribute. ex: #{ds.attributeName}=='Critical' ? '#ff0000' : '#00b33c'
Allowed Values: An expression which should return string after evaluation
➤ Show Tick Marks
Enable this to show tick marks on this gauge to display the values.
Allowed Values: Yes/No
➤ Show In Metrics
Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it.
Allowed Values: Yes/No
➤ Place Values Inside
Enable this to place values inside the gauge else it will display the values outside the gauge
Allowed Values: Yes/No
➤ Show Values
Enable this to display the value on the gauge
Allowed Values: Yes/No
➤ Force Decimals
Enable this to allow 0 padding at the end of decimal number.
Allowed Values: Yes/No
➤ Use Color Name As Value
Enable this to display the label of the Color child component instead of the value
Allowed Values: Yes/No
➤ Number Prefix
Using this property, you could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, you could specify this property to $ to show like $40000, $50000.
Allowed Values: Free text field
➤ Number Suffix
Using this property, you could add suffix to all the numbers visible on the graph. For example, to represent all figures quantified as per annum on the chart, you could specify this property to '/a' to show like 40000/a, 50000/a.
Allowed Values: Free text field
➤ Lower Limit
This attribute helps you explicitly set the lower limit of the chart. If you don't specify this value, the chart automatically calculates the lower limit based on the data provided by you.
Allowed Values: This attribute helps you explicitly set the lower limit of the chart. If you don't specify this value, the chart automatically calculates the lower limit based on the data provided by you.
➤ Upper Limit
This attribute helps you explicitly set the upper limit of the chart. If you don't specify this value, the chart automatically calculates the upper limit based on the data provided by you.
Allowed Values: This attribute helps you explicitly set the upper limit of the chart. If you don't specify this value, the chart automatically calculates the upper limit based on the data provided by you.
➤ Decimals
To round off the decimals of the Dial number on the chart set the number of decimal places to be rounded off
Allowed Values: Any number value
➤ Decimal Separator
This attribute helps you specify the character to be used as the decimal separator in a number.
Allowed Values: Free text field
➤ Thousand Separator
This attribute helps you specify the character to be used as the thousands separator in a number.
Allowed Values: Free text field
➤ Thousand Separator Position
By default, the thousand separator is placed after every three digits from right. You can customize the position of the thousand separator and place it as required. You can also set multiple values (separated by comma) to this attribute, instead of a single value. For example, we have set thousandSeparatorPosition='2,3'. So, the thousand separator is first placed after 3 digits starting from right and then onwards after every two digits
Allowed Values: Free text field
➤ Dial Value
These attributes let you customize dial value that will be shown on the chart.
Allowed Values: These attributes let you customize dial value that will be shown on the chart.
➤ Dial Value Font Size
Provide numerical value in pixels to adjust the dial value font size.
Allowed Values: Any number value
➤ Height
Provide numerical value to set height of an angular gauge.
Allowed Values: Any number value
➤ Width
Provide numerical value to set width of an angular gauge.
Allowed Values: Any number value
➤ Export Enabled
Enable this to allow export in png, jpg, pdf, svg or xls formats.
Allowed Values: Yes/No
➤ Export File Name
Specify the name (excluding the extension) of the output (export) file. default: chart
Allowed Values: Free text field
➤ Dark Back Ground
Enable this to display all the labels in lite color when the chart background color is dark.
Allowed Values: Yes/No
➤ On Click
Allowed Values: Controller Function
➤ Use Existing Data Source
Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.
Allowed Values: Yes/No
➤ Data Source
Select a datasource from the list.
Allowed Values: Select a datasource from the list.
➤ Data Source Alias
Allowed Values: Free text field
➤ Default Where Clause
Allowed Values: Free text field
➤ Max Rows
Allowed Values: Any number value
➤ Order By Clause
e.g. #firstAttr#, #secondAttr# DESC
Allowed Values: Free text field
➤ Auto Query
Check this property to query the selected datasource on component render.
Allowed Values: Yes/No
➤ Execute Count SQL
Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}
Allowed Values: Yes/No
➤ Execute Distinct SQL
Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.
Allowed Values: Yes/No
➤ Value Attribute
Provide an attribute which contains the value
Allowed Values: Provide an attribute which contains the value
➤ Function
Select a function to do arithmetic operations on data.
Allowed Values:
SUM
COUNT
AVG
MAX
MIN
COUNT(DISTINCT)
➤ Auto Refresh Interval
Specify this property in seconds to refresh the component to specified interval.
Allowed Values: Any number value
Last updated