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 settings.
On this page:
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.
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 | Changes the Thickness of the scale bar. |
Scale Bar Color | Sets the color of the scale bar. |
Scale Bar Border Color | Changes the Border of the scale bar. |
Scale Bar Border Thickness | Changes the Border thickness of the scale. |
Label Configuration
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. |
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.
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. |
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.
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);
}
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
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)
In this section...