All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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"
></
Value=
"20"
"5"
Color=
"LightGreen"
"32"
"10"
"YellowGreen"
</
...
telerik:RadRadialGauge
"RadRadialGauge1"
telerik:RadialPointer
<%@ 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>