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

WebForms Gauge Overview

This demo shows the basic functionality and structure of the RadGauge. It is an example how additional styling and some relatively simple logic can be used to create a visually appealing interface.

About RadGauge for ASP.NET AJAX

Built to match your simple data visualization needs, the RadGauge is a simple control powered by Kendo UI DataViz that shows clearly where a certain value is according to the given range. It does not require complex databinding or configuration on the server and also offers client-side API that you can use to change the shown value while sending as little data across the wire as possible.

RadGauge and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Client-side rendering - the entire markup is created with JavaScript so the server has to do less
  • Animation effects when the value is changed
  • Comfortable tag structure that resembles the visual structure of the control
  • Telerik UI for ASP.NET AJAX offers four separate Gauge controls with different look and feel serving their own purposes - Arc Gauge, Circular Gauge, Radial Gauge and Linear Gauge that can be either vertical, or horizontal
  • It takes only seconds to add RadGauge to your page and check if it fits for your page or application
  • Ships with rich set of skins for easy and consistent styling with the look and feel of Vista, Office 2007, Office2010 (Black, Blue, Silver) Outlook, etc.
More about RadGauge for ASP.NET AJAX
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Gauge.Overview.DefaultVB" %>

<%@ 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 rel="Stylesheet" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel runat="server" ID="WeatherLoadingPanel">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <telerik:RadAjaxPanel runat="server" ID="WeatherPanel" LoadingPanelID="WeatherLoadingPanel">
            <div class="weatherBackgroundHolder" runat="server" id="weatherBackground">
                <div class="weatherStationHolder">
                    <div class="qsf-ib barometerHolder">
                        <telerik:RadRadialGauge runat="server" ID="BarometerGauge" Width="380px" Height="380px" Style="z-index: 1000;">
                            <Pointer Value="1014" Color="#000000">
                            </Pointer>
                            <Scale Min="940" Max="1100" MajorUnit="20" MinorUnit="5" StartAngle="-45" EndAngle="225">
                                <MajorTicks Size="20" Color="#000000" />
                                <MinorTicks Size="10" Color="#000000" />
                                <Labels Color="#000000" Font="bold 14px Arial,Verdana,Tahoma" />
                            </Scale>
                        </telerik:RadRadialGauge>
                    </div>
                    <div class="qsf-ib thermometerHolder">
                        <telerik:RadRadialGauge runat="server" ID="ThermometerGauge" Width="120px" Height="120px">
                            <Pointer Value="22" Color="#000000">
                                <Cap Size="0.2" />
                            </Pointer>
                            <Scale Min="-20" Max="50" MajorUnit="10" MinorUnit="5">
                                <MajorTicks Size="5" Color="#777777" />
                                <MinorTicks Size="2" Color="#777777" />
                                <Labels Position="Outside" Color="#000000" Font="bold 11px Arial,Verdana,Tahoma" />
                                <Ranges>
                                    <telerik:GaugeRange From="20" To="30" Color="#e57d29" />
                                </Ranges>
                            </Scale>
                        </telerik:RadRadialGauge>
                    </div>
                    <div class="qsf-ib hygrometerHolder">
                        <telerik:RadRadialGauge runat="server" ID="HygrometerGauge" Width="120px" Height="120px">
                            <Pointer Value="42" Color="#000000">
                                <Cap Size="0.2" />
                            </Pointer>
                            <Scale Min="0" Max="100" MajorUnit="20" MinorUnit="5">
                                <MajorTicks Size="5" Color="#777777" />
                                <MinorTicks Size="2" Color="#777777" />
                                <Labels Position="Outside" Color="#000000" Font="bold 11px Arial,Verdana,Tahoma" />
                                <Ranges>
                                    <telerik:GaugeRange From="30" To="50" Color="#e57d29" />
                                </Ranges>
                            </Scale>
                        </telerik:RadRadialGauge>
                    </div>
                    <div class="refreshButtonHolder">
                        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="UpdateWeatherButton" Text="Update Weather Details"
                            Height="66px" Width="251" OnClick="UpdateWeatherButton_Click">
                            <Image ImageUrl="images/btn_bg.png" IsBackgroundImage="true" />
                        </telerik:RadButton>
                    </div>
                </div>
            </div>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance