New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Linear Gauge

  • Demo Configurator
  • General
  • Appearance
  • Spin UpSpin Down
  • Gauge orientationVertical
  • Main background color
    Pick Color(Current Color is blank)

  • Border

  • Color
    Pick Color(Current Color is blank)
    Spin UpSpin Down
  • DashType
    Solid

The Linear Gauge is one of the flavours that are available in the RadGauge control family. It represents the value on a linear scale much like a thermometer would.

The specific properties that make it different are mostly related to the pointer - it can be either a small triangular tick (similar to an arrow), or an entire bar like a thermometer. It can be either horizontal or vertical.

This demo shows the basics of the Linear Gauge control. Examining the code will show the basic markup - tags and properties, the code-behind logic will show the code structure.

Some logic is incorporated for the configurator to keep the gauge appearance when changing properties. Also, setting a value that is outside of the range will result in either a min or max value being set, if you disregard the instructions in the value textbox before clicking the configure button.

New: As of R2 2023 you can better control the appearance of the Linear Gauge via the new properties dedicated to the Border and Margin settings of the Gauge Area. Give a try to the new configuration options in the updated Demo Configurator above.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Gauge.Types.LinearGauge.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadLinearGauge1" LoadingPanelID="RadAjaxLoadingPanelConfiguration" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" Width="150px" Height="350px">
                <Pointer Shape="BarIndicator" Value="15">
                    <Track Opacity="0.2" />
                </Pointer>
                <Scale Min="-20" Max="50" MajorUnit="10">
                    <Labels Format="{0} degrees" />
                    <Ranges>
                        <telerik:GaugeRange Color="#2a94cb" From="-20" To="5" />
                        <telerik:GaugeRange Color="#8dcb2a " From="5" To="17" />
                        <telerik:GaugeRange Color="#ffc700" From="17" To="27" />
                        <telerik:GaugeRange Color="#ff7a00" From="27" To="35" />
                        <telerik:GaugeRange Color="#c20000" From="35" To="50" />
                    </Ranges>
                </Scale>
            </telerik:RadLinearGauge>
        </div>
    </div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanelConfiguration">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View Title="General">
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox Label="Enter value between -20 and 50" runat="server"
                                MinValue="-20" MaxValue="50" Size="Medium" ID="NewValueNumericBox" AutoPostBack="true" Value="15" AllowOutOfRangeAutoCorrect="true">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:DropDownList Label="Gauge orientation" runat="server" ID="OrientationComboBox" AutoPostBack="true" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Text="Vertical" Value="Vertical" Selected="true" />
                                    <telerik:DropDownListItem Text="Horizontal" Value="Horizontal" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ColorPicker Label="Main background color" runat="server" ID="MainBackgroundColorPicker" ShowIcon="true" Size="Auto" AutoPostBack="true">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="IsReversedCheckBox" Text="Is Reversed (changes values position)" AutoPostBack="true" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="IsMirroredCheckBox" Text="Is Mirrored (changes labels position)" AutoPostBack="true" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
              <qsf:View Title="Appearance" >
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group new">
                        <li>
                            <h4>Gauge Area</h4>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="appHeight" AutoPostBack="true" Label="Height" MinValue="0" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="appWidth" AutoPostBack="true" Label="Width" MinValue="0" Size="Narrow">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="backColor" ShowIcon="true" AutoPostBack="true" Label="Back Color" Size="Narrow">
                            </qsf:ColorPicker>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Border</h4>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="borderColor" ShowIcon="true" AutoPostBack="true" Label="Color" Size="Narrow">
                            </qsf:ColorPicker>
                            <qsf:NumericTextBox runat="server" ID="borderWidth" AutoPostBack="true" Label="Width" MinValue="0" Size="Narrow">
                                <NumberFormat DecimalDigits="1" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <span class="label">DashType</span>
                            <qsf:DropDownList runat="server" ID="borderDashType" AutoPostBack="true" SelectedText="Solid" Size="Medium"></qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Margin</h4>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="ddlMarginTop" AutoPostBack="true" Label="Top" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="ddlMarginBottom" AutoPostBack="true" Label="Bottom" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="ddlMarginLeft" AutoPostBack="true" Label="Left" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="ddlMarginRight" AutoPostBack="true" Label="Right" Size="Narrow" MinValue="0">
                                <NumberFormat DecimalDigits="1" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance