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

Radial Gauge

  • Demo Configurator
  • General
  • Appearance
  • Main background color
    Pick Color(Current Color is blank)

  • Border

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

The Radial Gauge is one of the flavours that are available in the RadGauge control family. It represents the value on a circular scale much like car speed dial.

The specific properties that make it different are related to the pointer and rotation angles - the pointer is an arrow and its size is a percentage of the gauge size while the entire scale can be rotated as specified by the StartAngle and EndAngle properties.

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

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. The pointer's Cap size is a percentage value from the entire gauge control where 1 is the entire gauge and 0 means no pointer.

New: As of R2 2023 you can better control the appearance of the Radial Gauge via the new properties dedicated to the Border and Margin settings of the Gauge Area. You can also control the length of the Pointer via the Length property under the Pointer inner tag. Give a try to the new configuration options in the updated Demo Configurator above.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Gauge.Types.LinearGauge.DefaultVB" %>

<%@ 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="RadRadialGauge1" LoadingPanelID="RadAjaxLoadingPanelConfiguration" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-thin">
        <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Width="300px" Height="300px">
            <Pointer Value="2.2">
                <Cap Size="0.1" />
            </Pointer>
            <Scale Min="0" Max="6" MajorUnit="1" RangeSize="5">
                <Labels Format="{0} bar" />
                <Ranges>
                    <telerik:GaugeRange Color="#8dcb2a" From="1.5" To="2.5" />
                    <telerik:GaugeRange Color="#ffc700" From="2.5" To="3.5" />
                    <telerik:GaugeRange Color="#ff7a00" From="3.5" To="4.5" />
                    <telerik:GaugeRange Color="#c20000" From="4.5" To="6" />
                </Ranges>
            </Scale>
        </telerik:RadRadialGauge>
    </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:DropDownList Label="Labels position" runat="server" ID="LabelsPositionComboBox" AutoPostBack="true" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Text="Inside" Value="Inside" Selected="true" />
                                    <telerik:DropDownListItem Value="Outside" Text="Outside" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox Label="Pointer size" runat="server" Size="Narrow" AutoPostBack="true" ID="PointerCapSizeNumericBox" AllowOutOfRangeAutoCorrect="true"
                                MaxValue="1" MinValue="0" ShowSpinButtons="true" Value="0.1">
                                <IncrementSettings Step="0.05" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox Label="Set value between 0 and 6" Value="2.2" runat="server" Size="Narrow" AutoPostBack="true" ID="NewValueNumericBox" AllowOutOfRangeAutoCorrect="true"></qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:Label Text="Pointer Length" runat="server" />
                            <span class="newTag"></span>
                            <qsf:Slider ID="rsPointerLength" runat="server" ShowDecreaseHandle="false" TrackPosition="TopLeft" Width="250px" AutoPostBack="true" Value="1"
                                OnValueChanged="rsPointerLength_ValueChanged"
                                ShowIncreaseHandle="false" MinimumValue="0" MaximumValue="1" ItemType="Tick" SmallChange="0.1" LargeChange="0.25">
                            </qsf:Slider>
                            <br />
                        </li>
                        <li>
                            <qsf:NumericTextBox Label="Scale Range size" runat="server" Size="Medium" AutoPostBack="true" ID="NumericTextBox3" AllowOutOfRangeAutoCorrect="true"
                                MaxValue="50" MinValue="5" ShowSpinButtons="true" Value="5">
                                <IncrementSettings Step="5" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ColorPicker Label="Main background color" runat="server" AutoPostBack="true" ID="MainBackgroundColorPicker" ShowIcon="true">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="IsReversedCheckBox" Text="Is Reversed (changes values position)" AutoPostBack="true"></asp:CheckBox>
                            </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