I have a Circular Gauge within a bootstrap card. I cannot seem to get the "CenterTemplate" value centered in the gauge. Is there a setting I'm missing or does someone have a custom CSS to help.  below is the html markup along with an attached image of the gauge.  

Thank you in advance for any help!

<div class="card shadow mb-4" id="gaugecontainer1">
     <div class="card-header py-3">
	   <h6 class="m-0 font-weight-bold text-primary">Daily Productivity Rate</h6>
       </div>
	<div class="card-body">
            <div class="container-fluid align-content-center">								
	        <telerik:RadCircularGauge ID="Gauge1" runat="server" Width="90%" Height="350px" Font-Size="X-Large"   Skin="Silk" CssClass="gauge-left-padd">
		<ClientEvents OnLoad="Gauge1_OnLoad" />
		<CenterTemplate>
			#:value # %
		</CenterTemplate>
		<Scale Min="0" Max="200">
		         <Labels Visible="true" Position="Inside" Font="12px Arial,Helvetica,sans-serif" Format="{0}%" />
			<MajorTicks Visible="true" Size="20" Color="Black" />
			<MinorTicks Visible="true" Color="Black" />
		 </Scale>
		<ColorsCollection>
			<telerik:ArcGaugeColor From="0" To="79" Color="Red" />
			<telerik:ArcGaugeColor From="80" To="90" Color="Orange" />
			<telerik:ArcGaugeColor From="91" To="100" Color="Yellow" />
			<telerik:ArcGaugeColor From="101" To="120" Color="LightGreen" />
			<telerik:ArcGaugeColor From="121" To="200" Color="Blue" />
		</ColorsCollection>
	</telerik:RadCircularGauge>								
     </div>
 </div>
</div>
.gauge-left-padd {
    padding-left: 2em;
}		

<script type="text/javascript">
    var gauge1, TO = false;
    function Gauge1_OnLoad(sender, args) {
	gauge1 = sender.get_kendoWidget();
     }
     window.onresize = (function () {
	if (TO !== false)
		clearTimeout(TO);
	TO = setTimeout(resizeGauge, 200);
        });
        function resizeGauge() {
	       if (gauge1) {
		   gauge1.resize();
	        }
          }
</script>

My issue is the gauge control won't render in design mode:

Error Creating Control - GaugeuserCountFailed to create designer 'Telerik.Web.UI.RadRadialGauge, Telerik.Web.UI, Version=2020.2.617.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4'

I've got a reference in the project page to the .40  .dll   version..

Project builds & runs fine, just cannot get this to work!..

This is VS.NET 2017 on Windows 10

I've tried deleting files in:

%AppData%\Local\Microsoft\VisualStudio\16.0_1695dc1b\ProjectAssemblies, Cleaning & REbuilding the solution..

Help!

Rich

Windows 7 Enterprise - IE 11 (Version 11.0.9600.19236)
VS 2012 - .NET Framework 3.5
Telerik UI For ASP.NET AJAX 2016.2.607.305

We've been using the RadRadialGauge control in our intranet web application for years since around 2016 with no issues.  Just recently (not sure exactly when) our users started noticing that the control was no longer displaying, just completely blank (see attachment 3-RadRadialGauge_Missing.jpg).  After some analyzing & testing I've determined it doesn't seem to be a licensing or server-side issue. 

To come to this conclusion I decided to try the RadLabel control which is just textual & has no graphic rendering like RadRadialGauge (see attachment 1-RadLabel.jpg).  It appears fine since it's only displaying text.

Next I tried RadDatePicker which has a combination of text & graphic rendering (see attachment 2-RadDatePicker.jpg).  It resulted in sort of a hybrid display where the date input box is there, but instead of showing the calendar icon it just has the mouse hover text.

It should be noted throughout this process I also tried downloading the latest version of these controls (2019.1.115.35) but still experienced the same behavior.  I'm theorizing these problems are due to a Windows or more likely IE update which we might have recently received.  All software updates like this are managed at the Enterprise level & pushed to all users in our company.  I've tried searching the forums & I see here & there somewhat similar rendering issues posted, but nothing so far which has resolved my particular issue.

Any help would be greatly appreciated!

I am using Visual Studio 2017, and I'd like to change the color of the point track as shown here: https://docs.telerik.com/devtools/aspnet-ajax/controls/gauge/structure.

What I've tried:

1. <telerik:RadLinearGauge ID="gauge" runat="server" Height="280" Pointer-Track-Color="#5ca038" Pointer-Track-Opacity="0.5" Pointer-Track-Size="30" Pointer-Track-Visible="true">

 2. <Pointer Shape="BarIndicator" Value="15" Size="30" Color="#5ca038">
           <Track Opacity="0.2" Size="30" Color="Black" />
     </Pointer>

3. <Pointer Track-Visible="true" Track-Color="Green" Track-Size="30" Track-Opacity="0.6"></Pointer>

However, none of the above had any effect on the point track. Could you suggest? Thank you.

Gary,

Hi I am goingnuts , please help me!  RadGauge needle value updates fine to specified value on local host but not when I have published the code? 

http://temperatur.gpslogik.se/1  is the published code.  (throws input error on the Chrome developer console, I dont understand) 

Here is part of my code!

      
                                <telerik:RadLabel ID="RadLabel6" runat="server" Text="Larmtillstånd" Font-Size="Small"  AutoPostBack="True" Font-Bold="True"></telerik:RadLabel><br/>
                                <telerik:RadLabel ID="RadLabel3" runat="server" Text="Normal" BackColor="#33CC33" Font-Bold="True" ForeColor="White" Width="300px" ></telerik:RadLabel>

                           <div class="demo-container size-thin">
                                        <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Width="200px" Height="200px" Skin="Bootstrap">
                                            <Pointer Value="0">
                                                <Cap Size="0.1" />
                                            </Pointer>
                                            <Scale Min="0" Max="40" MajorUnit="10" >
                                                <Labels Format="{0} C°" />
                                                <Ranges>
                                                    <telerik:GaugeRange Color="#add8e6" From="0" To="5" />
                                                    <telerik:GaugeRange Color="Green" From="5" To="25" />
                                                    <telerik:GaugeRange Color="#ff0000" From="25" To="40" />                                     
                                                </Ranges>
                                            </Scale>
                                        </telerik:RadRadialGauge>
                               <p></p>
                               <telerik:RadHtmlChart ID="RainfallChart" runat="server" Layout="Sparkline" Width="300px" Height="60px" PlotArea-XAxis-Reversed="true">
                                            <PlotArea>
                                                <Series>
                                                    <telerik:AreaSeries DataFieldY="RainfallData">
                                                        <Appearance FillStyle-BackgroundColor="#00b37d"></Appearance>
                                                        <TooltipsAppearance Color="White" />
                                                    </telerik:AreaSeries>
                                                </Series>
                                            </PlotArea>
                                        </telerik:RadHtmlChart><br />
                               <telerik:RadLabel ID="RadLabel7" Text="Temperatur trend" runat="server"></telerik:RadLabel>                  
                                  <div class="demo-containers">
              

 OBJCONN.Close() : OBJCONN.Open()
        'Fyll dropdown med användare
        Dim Q As New SqlCommand("SELECT * FROM temperature_values where TempDescription='" & unit & "'", OBJCONN)
        Dim R As SqlDataReader = Q.ExecuteReader
        If R.HasRows = True Then
            Do While R.Read

                adress1 = R("TemperatureAdress")
                TidX = R("TempTimeStamp")
                lat = R("Temperature_latitude")
                lng = R("Temperature_longitude")
                groupname = R("Temperatur_groupName")
                TempDescription = R("TempDescription")
                value = R("TempValue")
            Loop
        End If
        OBJCONN.Close()
        RadLabel2.Text = "<strong>Kl: " & TidX & "<br>" & groupname & " / " & TempDescription & "<br> Temperatur är " & value & "°C</strong>" ', Senast kända adress " & adress1


        'Hämta aktuellt värde och tid för vald temperaturgivare

        RadRadialGauge1.Pointer.Value = value

        Timer1.Enabled = True
        RainfallChart.DataSource = GetData()
        RainfallChart.DataBind()

Is there anyway to change the timing (speed) of the needle sweep?

I want to slow down the speed of the needle after its been given a value.

I don't see a exposed value, but I am guessing that some JavaScript "timer" function is used to control the speed of the needle when it moves to a given value.

Is some value existing in the control? I willing to set this value server or client side. eg:

eg:

var gao6 = $find("<%=gaPartsDiscount.ClientID%>"); //the standard script control object
var gao6g = gao6.get_kendoWidget(); //the Kendo widget
var gao6v;
-----> set "speed" of sweep??????
gao6g.value(50);

Regards,

Albert D. Kallal

Hello ,

Can any body help me with the below design in telerik using LinearGauge Horizontal ..

Please reply asap..Thanks.

Hello,

I recently upgraded one of our ASP.NET 4 applications from Q2 2014  to the latest 2017 and noticed that the background for the scale changed from gray to white (see attached) and I have not been able to find a way to change it back.  I looked within the Telerik demos and found that I'm able to change the BackColor, but it changes it for the entire RadLinearGauge tag.  Is there any way to accomplish this?

How can I use (Gauge - Volume Control in RadGrid) Like (RadRating in RadGrid) Sample

Hi Sir / Madam,

Thanks in Advance

I have a challenging task to do i need to do a guage like Ship_trim.png and using west east orientation i got two guages in west and east . width of the guages are