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

Circular Gauge

  • Demo Configurator
  • General
  • Appearance

  • Center Template

  • Fore Color
    Pick Color(Current Color is blank)

  • Scale Appearance

  • Range Color
    Pick Color(Current Color is blank)
  • RangePlaceHolder Color
    Pick Color(Current Color is blank)
  • LineCap type
    Round

  • Border

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

Description

The RadCircularGauge makes possible to visualize numeric values on a complete stylized scale. This enables the users to have a brighter picture on the presented values and easily distinguish the allocation of data.

The Control supports full customization of the Center Text, as well as, rich Scale and Color capabilities.

The Telerik Gauges set will allow your page to have a more professional and comprehensible look.

The Arc Gauge Control is available as of R2 2023.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Gauge.Types.CircularGauge.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="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCircularGauge1" LoadingPanelID="RadAjaxLoadingPanelConfiguration" />
                    <telerik:AjaxUpdatedControl ControlID="RadSlider1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script>
            function pageLoad() {
                var circularGauge = $find("<%= RadCircularGauge1.ClientID %>");
                var slider = $find("<%= RadSlider1.ClientID %>");
                circularGauge.set_value(slider.get_value());
            }

            function clientValueChanged(sender, args) {
                var circularGauge = $find("<%= RadCircularGauge1.ClientID %>");
                circularGauge.set_value(args.get_newValue());
            }
        </script>
    </telerik:RadScriptBlock>

    <div class="demo-container no-bg size-thin">
        <telerik:RadCircularGauge runat="server" ID="RadCircularGauge1" Height="300" Width="300">
        </telerik:RadCircularGauge>

        <telerik:RadSlider runat="server" ID="RadSlider1" ForeColor="Blue"
            MinimumValue="0" Value="51" MaximumValue="100" ShowDecreaseHandle="false"
            ShowIncreaseHandle="false" OnClientValueChanged="clientValueChanged">
        </telerik:RadSlider>
    </div>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanelConfiguration">
    </telerik:RadAjaxLoadingPanel>


    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View Title="General">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Center Template</h4>
                            <telerik:RadToolTip runat="server" ID="RadToolTip1" TargetControlID="infoTip" IsClientID="true" AutoCloseDelay="3000">
                                RadCircularGauge uses <a href="https://docs.telerik.com/kendo-ui/framework/templates/overview">Kendo UI Templates</a> to provide full control over the rendering of center element.<br />
                                To evaluate the current value of the Gauge in its center element use <b>#:value#</b>
                            </telerik:RadToolTip>
                            <span id="infoTip" class="p-icon p-i-help info-button"></span>
                            <qsf:TextBox runat="server" ID="tbTemplate" Text="Temperature" AutoPostBack="true" Size="Medium" CssClass="templateInput"></qsf:TextBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="cpForeColor" ShowIcon="true" AutoPostBack="true" Label="Fore Color" Size="Narrow">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="cbTransitions" Text="Transitions" Checked="true" AutoPostBack="true" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfigurationColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Scale Configuration</h4>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="ntbMin" AutoPostBack="true" Label="Min" Value="0" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="ntbMax" AutoPostBack="true" Label="Max" Value="140" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="ntbStartAngle" AutoPostBack="true" Label="Start Angle" Value="0" MinValue="0" MaxValue="360" Size="Narrow">
                                    <NumberFormat DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <div class="fb-sized">
                                <qsf:NumericTextBox runat="server" ID="ntbRangeSize" AutoPostBack="true" Label="Range Size" Size="Narrow">
                                    <NumberFormat DecimalDigits="1" />
                                </qsf:NumericTextBox>
                            </div>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="cbReversed" Text="Reversed" AutoPostBack="true" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Scale Appearance</h4>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="cpRangeColor" ShowIcon="true" AutoPostBack="true" Label="Range Color" Size="Narrow">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="cpScalePlaceHolderColor" ShowIcon="true" AutoPostBack="true" Label="RangePlaceHolder Color" Size="Narrow">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <span class="label">LineCap type</span>
                            <qsf:DropDownList runat="server" ID="ddlLineCapType" AutoPostBack="true" SelectedText="Round" Size="Medium"></qsf:DropDownList>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="cbMajorTicks" Text="Major ticks" Checked="true" AutoPostBack="true" />
                            <asp:CheckBox runat="server" ID="cbMinorTicks" Text="Minor ticks" Checked="true" AutoPostBack="true" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Scale Labels</h4>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="cbLabelsVisible" Text="Visible" Checked="true" AutoPostBack="true" />
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="cpScaleLabelColor" ShowIcon="true" AutoPostBack="true" Label="Label Color" Size="Narrow">
                            </qsf:ColorPicker>
                        </li>
                        <li>
                            <span class="label">Position</span>
                            <qsf:DropDownList runat="server" ID="ddlScaleLabelsPosition" AutoPostBack="true" SelectedText="Inside" Size="Medium"></qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="ntbRangeDistance" AutoPostBack="true" Label="Distance" Size="Narrow" MinValue="0" Visible="false">
                                <NumberFormat DecimalDigits="1" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>

            <qsf:View Title="Appearance">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" 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="ConfiguratorColumn5" 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="ConfiguratorColumn6" 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