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

Multiple Pointers

  • Demo Configurator

First Pointer Value

Second Pointer Value

Third Pointer Value

Set All Pointer Values

This demo shows how can add Multiple Pointers to a RadGauge. The Pointers inner property accepts a collection of pointers, each with its own configuration options.

<telerik:RadLinearGauge runat="server" ID="RadLinearGauge1">
<Pointers>
<telerik:LinearPointer Value="8" Margin="0" Shape="BarIndicator"></telerik:LinearPointer>
<telerik:LinearPointer Value="20" Margin="5" Shape="BarIndicator" Color="LightGreen"></telerik:LinearPointer>
<telerik:LinearPointer Value="32" Margin="10" Shape="BarIndicator" Color="YellowGreen"></telerik:LinearPointer>
</Pointers>
...
</telerik:RadLinearGauge>
 
<telerik:RadRadialGauge runat="server" ID="RadRadialGauge1">
<Pointers>
<telerik:RadialPointer Value="8"></telerik:RadialPointer>
<telerik:RadialPointer Value="20" Color="LightGreen"></telerik:RadialPointer>
<telerik:RadialPointer Value="32" Color="YellowGreen"></telerik:RadialPointer>
</Pointers>
...
</telerik:RadRadialGauge>
  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" Width="130px" Height="360px" Skin="Silk">
                <Pointers>
                    <telerik:LinearPointer Value="8" Margin="10" Shape="BarIndicator" Color="#1b8892"></telerik:LinearPointer>
                    <telerik:LinearPointer Value="20" Margin="19" Shape="BarIndicator" Color="#56c3cd"></telerik:LinearPointer>
                    <telerik:LinearPointer Value="32" Margin="28" Shape="BarIndicator" Color="#9fe8ef"></telerik:LinearPointer>
                </Pointers>
                <Scale Min="-10" Max="40" MajorUnit="10" MinorUnit="2">
                    <Labels Template="#=value# points" />
                    <Ranges>
                        <telerik:GaugeRange Color="#dd690b" From="30" To="40" />
                        <telerik:GaugeRange Color="#f4ad3d" From="15" To="30" />
                        <telerik:GaugeRange Color="#ffda5a" From="-10" To="15" />
                    </Ranges>
                </Scale>
            </telerik:RadLinearGauge>
        </div>
        <div class="demo-container">
            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Width="360px" Height="360px" Skin="Silk">
                <Pointers>
                    <telerik:RadialPointer Value="8" Cap-Size="0.15" Color="#1b8892"></telerik:RadialPointer>
                    <telerik:RadialPointer Value="20" Cap-Size="0.1" Color="#56c3cd"></telerik:RadialPointer>
                    <telerik:RadialPointer Value="32" Color="#9fe8ef"></telerik:RadialPointer>
                </Pointers>
                <Scale Min="-10" Max="40" MajorUnit="10" MinorUnit="2">
                    <Labels Template="#=value# points" />
                    <Ranges>
                        <telerik:GaugeRange Color="#dd690b" From="30" To="40" />
                        <telerik:GaugeRange Color="#f4ad3d" From="15" To="30" />
                        <telerik:GaugeRange Color="#ffda5a" From="-10" To="15" />
                    </Ranges>
                </Scale>
            </telerik:RadRadialGauge>
        </div>
    </div>

    <script type="text/javascript">
        var demo = window.telerikDemo = window.telerikDemo || {};
        demo.radialGaugeClientId = "<%= RadRadialGauge1.ClientID %>";
        demo.linearGaugeClientId = "<%= RadLinearGauge1.ClientID %>";
    </script>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <h4>First Pointer Value</h4>
                    <qsf:Slider ID="RadSlider0" runat="server" ShowDecreaseHandle="false" TrackPosition="TopLeft" Width="250px"
                        OnClientLoad="demo.sliderClientLoad"
                        ShowIncreaseHandle="false" MinimumValue="-10" MaximumValue="40" ItemType="Tick" SmallChange="1" LargeChange="10">
                    </qsf:Slider>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <h4>Second Pointer Value</h4>
                    <qsf:Slider ID="RadSlider1" runat="server" ShowDecreaseHandle="false" TrackPosition="TopLeft" Width="250px"
                        OnClientLoad="demo.sliderClientLoad"
                        ShowIncreaseHandle="false" MinimumValue="-10" MaximumValue="40" ItemType="Tick" SmallChange="1" LargeChange="10">
                    </qsf:Slider>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <h4>Third Pointer Value</h4>
                    <qsf:Slider ID="RadSlider2" runat="server" ShowDecreaseHandle="false" TrackPosition="TopLeft" Width="250px"
                        OnClientLoad="demo.sliderClientLoad"
                        ShowIncreaseHandle="false" MinimumValue="-10" MaximumValue="40" ItemType="Tick" SmallChange="1" LargeChange="10">
                    </qsf:Slider>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow">
                    <h4>Set All Pointer Values</h4>
                    <qsf:TextBox ID="SetAllPointerValues" runat="server" Size="Narrow" Width="110px" ClientEvents-OnLoad="demo.textboxClientLoad"></qsf:TextBox>
                    <qsf:Button ID="Button1" runat="server" Text="Set all" AutoPostBack="false" OnClientClicked="demo.buttonClientClicked"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance