Overview
<<<<. please note there is already some information about the Linear Gauge in the "User Interface Controls" content, which is different from the info in this doc. should we merge it? >>>>This page provides information about the Linear Gauge control for WPF and HTML5, a tool for visualizing data on a linear scale. It discusses the main features, including adding scales, highlighting value ranges, and adding multiple pointers. The page guides users through configuration options such as General, Scale, Labels, Ticks, Pointer, and Range settings. In addition, it mentions the use of a code editor for advanced configurations and provides an example. Finally, it showcases the Linear Gauge control in runtime with default and modified settingsControls allow the visualization of data ranges in a linear format. The customization includes setting gauge orientation, position, linked data, range start and end, scale direction, interval, size, stroke, labels visibility, size, stroke, ticks size, thickness, stroke, pointer type, thickness, stroke, and range segments.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
The Linear Gauge control is available for HTML5. It allows visualizing data in the form of Linear Scale, and is designed to see a simple display of value compared to a scale and one or more ranges. Some of the key features of the Linear Gauge are: adding a scale to linear gauge using horizontal and vertical orientations, highlight the desired ranges of values in the gauge scale and adding multiple pointers to the linear scale.
To start using the Linear Gauge, select the control from the component selection window (as shown below) and place it in the drawing window.
Once placed in the drawing window, the control with the default configurations will appear as shown below.
This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.
Configuration
- Go to Displays / Draw.
- On the Components Panel, select Gauges, then LinearGauge.
- Click or drag-and-drop it on the Drawing area to use it.
- Double-click the object to open the configuration window.
Linear Gauge configurations encompass settings for General, Scale, Labels, Ticks, Pointer, and Range. General settings include gauge orientation, positions, linked value, range start, and end values. Scale settings involve scale direction, interval, bar size, stroke, border color, and thickness. Label settings cover visibility, size, stroke, prefix, and postfix options. Tick settings define major and minor tick sizes, thickness, stroke, and the number of minor ticks per interval. Pointer settings determine the type, stroke, thickness, height, and width of the pointer. Range settings specify segments, start and end values, color, and boundary width.
General
Linear Gauge General settings control the basic appearance and functionality of the gauge. These settings include orientation (horizontal or vertical), position relative to other elements (above or below),specific data value or source link (e.g., "Tag.Level"), and defining the starting and ending values of the gauge range (e.g., 0 to 100).
Linear Gauge General Settings | |
|---|---|
Field | Description |
Gauge Orientation | Sets the orientation of the gauge. Options include "Horizontal" and "Vertical," allowing the gauge to be displayed either horizontally or vertically. |
Gauge Positions | Sets the position of the gauge relative to other elements. Options include "Above" and "Below," determining whether the gauge appears above or below other components. |
Linked Value | Links a specific data value or source to the gauge. E.g.: "Tag.Level," indicates the gauge will display real-time data from this source. |
Range Start | Defines the minimum value the gauge can represent. Default is 0. |
Range End | Specifies the maximum value the gauge can represent. Default is 100. |
Scale
Linear Gauge Scale settings also manage the scale's direction, interval, size, stroke, border color, and thickness. Users can set the scale direction to forward or backward, define intervals between scale markings, adjust the scale bar size and stroke width, and customize the border's color and thickness to enhance visual clarity.
Linear Gauge Scale Settings | |
|---|---|
Field | Description |
Scale Direction | Sets the direction of the scale. Options include "Forward," indicating a normal ascending scale, and potentially "Backward," which would indicate a descending scale. |
Scale Interval | Defines the interval between scale markings, that is, the spacing of the major divisions on the scale. Default is 100. |
Scale Bar Size | Specifies the size of the scale bar, determining the thickness or height of the scale bar. Default is 15. |
Scale Bar Stroke | Adjusts the stroke (outline) width of the scale bar. This option influences the visual clarity and emphasis |
Configuration
The Linear Gauge can be configured as per requirements using the options provided in the control configuration window. The configuration window can be opened by double-clicking the control.
The properties in the configuration window are grouped by function to allow easier understanding and usage. The various configuration options are explained below.
General Configuration
Provides options to set the general properties like name and title.
General options | |
|---|---|
Property | Description |
Control Name | Name of the control can be changed using this property. |
Control Title | Title of the control can be changed using this property. |
Scale Configuration
Provides options to change the scale configurations.
Scale options
Property
Description
Scale Bar Orientation
Changes Orientation of the Scale. The Linear Gauge supports horizontal and vertical orientations.
Scale Direction
Changes the Scale direction. The linear gauge supports backward and forward position.
Minimum Value
Changes the Minimum value.
Maximum Value
Changes the Maximum value.
Interval Value
Changes the Interval value. The default value of the Interval property is auto interval.
Scale Bar Thickness
of the scale bar. |
Scale Bar |
BorderBrush |
Defines the color of the scale bar |
Scale Bar Border Color
border. The default setting is a shade of gray, which determines the visual appearance of the scale bar's border. |
Scale Bar Border Thickness |
Changes the Border thickness of the scale.
Provides options to change the label configurations.
Labels options | |
|---|---|
Property | Description |
Show Labels | Visibility of the label can be customized using this property. |
Label Position | The labels in the scale can be placed above or below the linear scale by using this property. |
Label Size | Customizes the size of the Label. |
Label Color | Customizes the color of the Label. |
Label Postfix | This property allows to postfix the values to scale labels. |
Label Prefix | This property allows you to prefix the values to scale labels. |
Ticks Configuration
Provides options to change the tick configurations.
Tick options | |
|---|---|
Property | Description |
Tick Position | Changes the position of ticks with respect to the linear scale. The linear gauge supports above, below and cross position. |
Major Tick Size | Changes the size of the major ticks. |
Major Tick Thickness | Changes the Color thickness of the major ticks. |
Major Tick Color | Changes the color of the minor ticks. |
Minor Tick Size | Changes the size of the minor ticks. |
Minor Tick Thickness | Changes the Color thickness of the minor ticks. |
Major Tick Color | Changes the color of the major ticks. |
Minor Ticks Per Interval | Sets the number of minor ticks that must be placed in-between the major ticks in the linear scale. |
Pointer Configuration
Provides options to change the pointer configurations.
Pointer options | |
|---|---|
Property | Description |
Pointer Type | Type of pointer can be changed in the linear scale using this property. Linear gauge supports Bar Pointer and symbol Pointer. |
Pointer Value | Changes the value for the pointer. |
Bar Pointer Color | Used to customize the color of the bar pointer. |
Bar pointer Thickness | Changes the Thickness of Bar pointer. |
Symbol Pointer Height | Changes the height of the symbol pointer. |
Symbol Pointer Width | Changes the width of the symbol pointer. |
Symbol Pointer color | Used to customize the color of the Symbol pointer. |
Symbol Pointer Position | Changes the position of the symbol pointer. |
Range Configuration
Provides options to change the range configurations.
Range options | |
|---|---|
Property | Description |
Range Position | Changes the position of ranges with respect to the linear scale. |
Show Range | Changes visibility of the range. |
Range Position | Changes the position of ranges in the linear range. |
Start Value | Sets the Start value of the linear range. |
End Value | Sets the End value of the linear range. |
Start Width | Sets the width of the starting portion of the linear range. |
End Width | Sets the width of the ending portion of the linear range. |
Range Color | Changes the color of the range. |
Range Offset | The linear range can be positioned with respect to the linear scale by changing this property. |
| Note |
|---|
It is possible to add 5 ranges from the configuration window. Code editor can be used to add more than 5 ranges. |
Properties
The configuration window does not expose all properties available to configure the Linear Gauge. The list of all properties available are provided below.
| Note |
|---|
| It is possible to add multiple pointers and ranges to the Linear Gauge, but the configuration window does not provide this functionality. Hence, the code editor must be used to add multiple pointers and ranges if needed. |
Property Name | Description |
|---|---|
ScaleOrientation | Changes the Orientation of the Scale.The Linear Gauge supports horizontal and vertical orientations. |
ScaleDirection | Changes the Scale direction.The linear gauge supports backward and forward position. |
ScaleMinimumValue | Changes the Minimum value can be changed using this property. |
ScaleMaximumValue | Changes the Maximum value can be changed using this property. |
ScaleBarLength | Customizes the length of the scale bar (width in case of landscape orientation). |
ScaleBarSize | Customizes the size of the scale bar (height in case of landscape orientation). |
ScaleBarColor | Sets the color of the scale bar. |
ScaleBarBorderColor | Changes the Border of the scale bar. |
ScaleInterval | Changes the Interval value. The default value of the Interval property is auto interval. |
ScaleBarBorderThickness | Changes the Border thickness of the scale. |
ScaleBarPositionFactor | Gets or sets the factor value to position Scale Bars based upon the scale. |
ElementPositionMode | Gets or sets the position of elements with respect to the linear scale. |
LabelVisibility | Visibility of the label can be customized using this property. |
LabelPosition | The labels in the scale can be placed above or below the linear scale by using this property. |
LabelSize | Customizes the size of the label. |
LabelColor | Customizes the color of the label. |
LabelPostfix | Allows to postfix the values to scale labels |
LabelPrefix | Allows to prefix the values to scale labels. |
LabelOffset | Gets or sets the offset value to show space between ticks and labels. |
LabelFontSize | Changes the Size of the Label. |
LabelFontFamily | Changes the Font Family of the Label. |
MajorTickSize | Changes the size of the major ticks. |
MinorTickSize | Changes the size of the minor ticks. |
MajorTickStrokeThickness | Changes the Color thickness of the major ticks. |
MinorTickStrokeThickness | Changes the Color thickness of the minor ticks. |
MinorTickColor | Changes the color of the minor ticks. |
MajorTickColor | Changes the color of the major ticks. |
MinorTicksPerInterval | Sets the number of minor ticks that must be placed in-between the major ticks in the linear scale. |
TickPosition | Changes the position of ticks with respect to the linear scale.The linear gauge supports above, below and cross position. |
PointerType | Type of pointer can be changed in the linear scale using this property. Linear gauge supports Bar Pointer and symbol Pointer. |
PointerValue | Changes the value for the pointer. |
BarPointerStroke | Used to customize the color of the bar pointer. |
BarPointerStrokeThickness | Changes the Thickness of bar pointer. |
SymbolPointerHeight | Changes the The height of the symbol pointer. |
SymbolPointerWidth | Changes the The width of the symbol pointer. |
SymbolPointerStroke | Used to customize the color of the Symbol pointer. |
SymbolPointerPosition | Changes the position of the symbol pointer. |
SymbolPointerStyle | Changes the Style of the symbol pointer. |
ShowRange1 | Changes the Visibility of the range can be customized using this property. |
RangePosition | The position of ranges with respect to the linear scale. |
Range1Start | Sets the start value of the linear range. |
Range1End | Sets the End value of the linear range. |
Range1StartWidth | Sets the width of the starting portion of the linear range. |
Range1EndWidth | Sets the width of the ending portion of the linear range. |
Range1Color | Used to customize the color of the Range. |
Range1Offset | The linear range can be positioned with respect to the linear scale by changing this property. |
| Note |
|---|
To configure other 4 properties change the value from Range1 to Range2/Range3/Range/4 Range5 accordingly. |
These properties can be used to configure the control from the platform's code editor. An example to add a range to the WPF Linear gauge from the code editor is given below.
| Code Block |
|---|
publicvoid DisplayOpening()
{
T.Wpf.Controls.TLinearGaugeControl control =
this.CurrentDisplay.GetControl("TLinearGaugeControl1")as
T.Wpf.Controls.TLinearGaugeControl;
Syncfusion.UI.Xaml.Gauges.SfLinearGauge gauge = control.Content as
Syncfusion.UI.Xaml.Gauges.SfLinearGauge;
Syncfusion.UI.Xaml.Gauges.LinearRange range =new
Syncfusion.UI.Xaml.Gauges.LinearRange();
range.StartValue =300;
range.EndValue =500;
range.StartWidth =20;
range.EndWidth =30;
range.RangeStroke =new SolidColorBrush(Colors.Red);
gauge.MainScale.Ranges.Add(range);
} |
| Note |
|---|
In order to use these properties in the code editor, a reference to a dependent library Syncfusion.SfGauge.WPF.dll must be added to Factory Studio. This library is located at “<Installation Path>\Tatsoft\FactoryStudio\fs-9.2\” and can be added to the platform by going to Run → Build → References, as shown below |
Specifies the thickness of the scale bar border. By default, it is set to "1,1,1,1", which indicates uniform thickness on all sides and affects the visual weight and prominence of the scale bar's border. |
Labels
Linear Gauge Labels Settings handle the visibility, size, stroke, prefix, and postfix of labels. Users can choose to show or hide labels, define their size, adjust the stroke color for emphasis, and add prefixes or postfixes to label values, allowing for clear and customized data representation.
Linear Gauge Labels Settings | |
|---|---|
Field | Description |
Labels Visibility | Sets the visibility of the labels. Options include "Visible" to show the labels, or "Hidden" to hide them. |
Label Size | Defines the font size of the text labels on the gauge. Default is 15. |
Label Stroke | Adjusts the stroke (outline) color of the labels. The default setting is a shade of gray, which affects the visibility and emphasis of the label text. |
Label Postfix | Adds a postfix to the label text. This field is blank by default, allowing the user to add a suffix to each label value if needed. |
Label Prefix | Adds a prefix to the label text. This field is blank by default, allowing the user to add a prefix to each label value if needed. |
Ticks
Linear Gauge Ticks settings specify the dimensions and appearance of major and minor tick marks. These settings include the size, thickness, and stroke color of both major and minor ticks, and the number of minor ticks per interval, enabling precise and detailed scale gradations for better data readability.
Linear Gauge Ticks Settings | |
|---|---|
Field | Description |
Major Tick Size | Defines the size of the major ticks, that is, it determines the length of the major tick marks on the gauge. Default is 15. |
Major Tick Thickness | Specifies the thickness of the major ticks, that is, it determines the width of the major tick marks. Default is 2. |
Major Tick Stroke | Adjusts the stroke (outline) color of the major ticks. The default setting is a shade of gray, affecting the visibility and emphasis of the major tick marks. |
Minor Tick Size | Defines the size of the minor ticks, that is, it determines the length of the minor tick marks on the gauge. Default is 7. |
Minor Tick Thickness | Specifies the thickness of the minor ticks. In other words, it determines the width of the minor tick marks. Default is 1. |
Minor Tick Stroke | Adjusts the stroke (outline) color of the minor ticks. The default setting is a shade of gray, affecting the visibility and emphasis of the minor tick marks. |
Minor Ticks Per Interval | Defines the number of minor ticks per interval. It specifies how many minor tick marks will appear between each pair of major tick marks, allowing for finer granularity. Default is 5. |
Pointer
Linear Gauge Pointer Settings determine the type and appearance of the gauge pointer. Users can choose between a bar pointer or symbol pointer, and adjust the stroke color and thickness for the bar pointer, or define the height, width, and stroke color for the symbol pointer, ensuring the pointer is clearly visible and fits the gauge design.
Linear Gauge Pointer Settings | |
|---|---|
Field | Description |
Pointer Type | Sets the type of pointer used in the gauge. Options include "Bar Pointer" and "Symbol Pointer." The current selection is "Bar Pointer," indicating a bar-shaped pointer. |
Bar Pointer Stroke | Adjusts the stroke (outline) color of the bar pointer. This option is available only if "Bar Pointer" is selected as the pointer type. |
Bar Pointer Thickness | Specifies the thickness of the bar pointer. This option is available only if "Bar Pointer" is selected as the pointer type. |
Symbol Pointer Height | Defines the height of the symbol pointer. This option is unlocked and available if "Symbol Pointer" is selected as the pointer type. |
Symbol Pointer Width | Defines the width of the symbol pointer. This option is unlocked and available if "Symbol Pointer" is selected as the pointer type. |
Symbol Pointer Stroke | Adjusts the stroke (outline) color of the symbol pointer. This option is unlocked and available if "Symbol Pointer" is selected as the pointer type. |
Range
Linear Gauge Range Settings configure specific segments of the gauge. Users can enable or disable each range segment, set the starting and ending values for each segment, assign different colors to segments, and define the start and end width of each segment's boundaries, allowing for distinct and visually segmented data representation.
Linear Gauge Range Settings | |
|---|---|
Field | Description |
Range | Indicates the specific range segment. The user can enable or disable each range by marking the checkbox next to the range entry. |
Range Start and End | Defines the starting and ending values for each range segment. This setting determines the minimum and maximum values for each color segment of the gauge. |
Color | Specifies the color for each range segment. This setting allows the user to visually differentiate between various segments of the gauge. |
Start and End Width | Defines the width of the start and end points of each range segment. This setting determines the thickness of the segment boundaries on the gauge. |
Runtime Execution
The LinearGauge Control provides a visual representation of data ranges in a linear manner. Users can customize the gauge by setting its orientation, position, and the data it is linked to. The control allows for detailed adjustments including the start and end of the range, scale direction, interval, and size. Additionally, users can modify the appearance of labels, ticks, pointers, and range segments in terms of size, thickness, and stroke. This level of customization ensures that the LinearGauge Control can be tailored to fit the specific needs of any application that requires linear data display.
In this section:
Runtime Execution
The following images show how the Linear Gauge control looks at runtime with default configurations.
- Linear gauge with default configurations
- Linear gauge with default configurations and additional range added from code editor (code sample provided in earlier section)
| Page Tree | ||||
|---|---|---|---|---|
|