Completed
Last Updated: 20 May 2016 12:06 by ngNurses
ADMIN
Created by: Marin Bratanov
Comments: 1
Category: Gauge
Type: Feature Request
9
Similar to kendo gauge's functionality:

http://demos.telerik.com/kendo-ui/linear-gauge/multiple-pointers

http://demos.telerik.com/kendo-ui/radial-gauge/multiple-pointers
Completed
Last Updated: 14 Jan 2022 12:15 by ADMIN
Release R1 2022
As a workaround the width of the range placeholder can be set through the gaugeObject:
JavaScript:
		function pageLoad() {
			var gauge = $find("<%=RadRadialGauge1.ClientID%>");
			gauge._gaugeObject.options.scale.rangeSize = 30;
			gauge.repaint();
		}
		<telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="350px" Width="350px">
			<Pointer Value="220" Color="Black">
				<Cap Color="Gray" Size="0.1" />
			</Pointer>
			<Scale Min="120" Max="300" MajorUnit="30" MinorUnit="5">
				<Labels Format="{0} °C" Position="Outside" />
				<Ranges>
					<telerik:GaugeRange Color="Orange" From="150" To="190" />
					<telerik:GaugeRange Color="Green" From="190" To="230" />
					<telerik:GaugeRange Color="Red" From="230" To="300" />
				</Ranges>
			</Scale>
		</telerik:RadRadialGauge>
Completed
Last Updated: 02 Jun 2023 10:12 by ADMIN
Release R2 2023
ADMIN
Created by: Marin Bratanov
Comments: 1
Category: Gauge
Type: Feature Request
6

			
Completed
Last Updated: 13 Aug 2021 08:46 by ADMIN
Release Q2 2015
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: Gauge
Type: Bug Report
4

			
Completed
Last Updated: 02 Jun 2023 10:11 by ADMIN
Release R2 2023
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Gauge
Type: Feature Request
3
Add border and border appearance options like color, width and type for the RadGauge. Currently the background color of the RadGauge is set to the wrapper of the control. Improve that color so that it fits in with the border and the shape of the control.
Completed
Last Updated: 04 Mar 2019 21:39 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Gauge
Type: Feature Request
3
You can do this with the Template property of the Label object

			<telerik:RadLinearGauge runat="server" ID="rlg1">
				<Scale Min="1" Max="4" MajorUnit="1">
					<Labels Template="#= getLabelText(value)#" />
				</Scale>
			</telerik:RadLinearGauge>
			<telerik:RadRadialGauge runat="server" ID="rrg1">
				<Scale Min="1" Max="4" MajorUnit="1">
					<Labels Template="#= getLabelText(value)#" />
				</Scale>
			</telerik:RadRadialGauge>
			<script>
				function getLabelText(e) {
					return "label for " + e;
				}
			</script>

For old versions the template can be set through the kendoWidget:

ASPX:

        <script>
            function setGaugeLabels(value) {
                switch (value) {
                    case -10:
                        return "Min: " + -10;
                        break;
                    case 35:
                        return "Max: " + 35;
                        break;
                    default:
                        return "Name: " + value;
                        break;
                }
            }
            function pageLoad() {
                var gaugeObj = $find("<%=RadLinearGauge1.ClientID%>")._gaugeObject;
                gaugeObj.options.scale.labels.template = "#=setGaugeLabels(value)#";
                gaugeObj.redraw();
            }
        </script>
        <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" Height="300px" Width="100px">
            <Pointer Value="11" Color="Green">
            </Pointer>
            <Scale Min="-25" Max="50" MajorUnit="15" MinorUnit="1">
                <Labels Format="{0} °C" />
                <Ranges>
                    <telerik:GaugeRange From="-25" To="-5" Color="Blue" />
                    <telerik:GaugeRange From="-5" To="15" Color="LightBlue" />
                    <telerik:GaugeRange From="15" To="30" Color="GreenYellow" />
                    <telerik:GaugeRange From="30" To="50" Color="Red" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
Completed
Last Updated: 14 Sep 2021 08:56 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 0
Category: Gauge
Type: Bug Report
2
If the gauge must display a huge range of values (e.g. Min=0, Max=500 000) having visible MinorTicks blocks the browser and ultimately throws an "out of stack space error".

The workaround is to set 
MinorTicks.Visible = false 
or Scale.MinorUnit to a sufficiently large value. If the minor unit is not set properly the minor ticks will clutter together and will be unreadable.
Completed
Last Updated: 24 Jun 2022 12:52 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 0
Category: Gauge
Type: Bug Report
1
There are some issues with the appearance of the gauges in RTL mode. They vary across browsers.

An easy fix is to add a CSS class to each of them and force direction: ltr:

<telerik:RadRadialGauge CssClass="rtlFix" ID="radialGauge1" runat="server" Width="272px" Height="272px">
    . . . . .
</telerik:RadRadialGauge>

.rtlFix
{
    direction: ltr;
}

If you need to swap the places of the min and max value the Reverse property of the Scale inner tag must be set to true.
Completed
Last Updated: 04 Mar 2019 21:39 by ADMIN
Created by: Ed
Comments: 1
Category: Gauge
Type: Feature Request
1
It would be nice if RadGauges, the radial ones especially, could include a title element
Completed
Last Updated: 29 Jul 2016 11:55 by ADMIN
Created by: Pradeep Deshpande
Comments: 1
Category: Gauge
Type: Feature Request
1
Label for the Gauge range in the RadGauge control.
Apart from the individual points, need ability to name the range.
Completed
Last Updated: 29 Sep 2015 10:49 by Andreas
Completed
Last Updated: 30 Apr 2015 14:35 by ADMIN
The following:

<telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" width=100%></telerik:RadLinearGauge>

will result in the width being set as 100px
Completed
Last Updated: 22 Jun 2022 09:30 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Gauge
Type: Bug Report
1

Workaround: 1) Use RenderAs="SVG". 2) Set 100% width to the gauge's wrapper prior the resizing

 

Use the solution below to make the control responsive:

     <table style="width: 100%;">
            <tr>
                <td>
                    <div style="width: 100%;" id="gauge"></div>
                    <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" RenderAs="SVG" Width="100%">
                        <Pointer Color="Gray" Size="10" />
                        <Scale Vertical="false" Min="0" Max="40">
                            <MinorTicks Size="20" />
                            <Ranges>
                                <telerik:GaugeRange Color="#D7E5D1" From="0" To="10" />
                                <telerik:GaugeRange Color="#EBE6D2" From="10" To="20" />
                                <telerik:GaugeRange Color="#F5D2D1" From="20" To="30" />
                            </Ranges>
                        </Scale>
                    </telerik:RadLinearGauge>
                </td>
            </tr>
        </table>
            <script type="text/javascript">
                var $ = $telerik.$;
                $(window).resize(function () {
                    $("#<%= RadLinearGauge1.ClientID %> > div")[0].style.width = "100%";
                    $find('<%= RadLinearGauge1.ClientID %>').get_kendoWidget().resize();

                });
            </script>

Completed
Last Updated: 04 Jul 2013 14:57 by ADMIN
Completed
Last Updated: 02 Jun 2023 10:12 by ADMIN
Release R2 2023
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: Gauge
Type: Feature Request
0
Expose an additional property in RadGauge that controls the margin for the gaugeArea.
Completed
Last Updated: 02 Jun 2023 10:11 by ADMIN
Release R2 2023
For the time being you can use the following workaround:

        <script>
            var pointerSize = 35;

            function pageLoad() {
                var gauge = $find("<%=rgEpmScorecard.ClientID%>");
                gauge._gaugeObject.options.scale.rangeSize = 25;
                gauge.repaint();
            }

        </script>
        <telerik:RadRadialGauge ID="rgEpmScorecard" runat="server" Skin="Metro" Height="99px" Width="100px">
            <Pointer Value="50" Color="Black">
                <Cap Size="0.5" Color="Black" />
            </Pointer>
            <Scale MajorUnit="10" Max="100" Labels-Visible="false" StartAngle="-45" EndAngle="225">
                <MajorTicks Visible="false" />
                <MinorTicks Visible="false" />
                <Ranges>
                    <telerik:GaugeRange Color="#ac1d23" From="0" To="16.67" />
                    <telerik:GaugeRange Color="#c26522" From="16.7" To="33.33" />
                    <telerik:GaugeRange Color="#d2b408" From="33.5" To="50" />
                    <telerik:GaugeRange Color="#b5be25" From="50.04" To="66.66" />
                    <telerik:GaugeRange Color="#0c833f" From="66.8" To="83.33" />
                    <telerik:GaugeRange Color="#0b6cb3" From="83.38" To="100" />
                </Ranges>
            </Scale>
        </telerik:RadRadialGauge>
        <script>

            var dataviz = kendo.dataviz,
                draw = dataviz.drawing,
                Path = draw.Path,
                DEFAULT_LINE_WIDTH = 0.5;

            kendo.dataviz.RadialPointer.fn._renderNeedle = function () {
                var that = this;
                var options = that.options;
                var minorTickSize = that.scale.options.minorTicks.size;
                var center = that.center;
                var needleColor = options.color;

                var needlePath = new Path({
                    fill: { color: needleColor },
                    stroke: { color: needleColor, width: DEFAULT_LINE_WIDTH }
                });

                needlePath.moveTo(center.x + that.radius - minorTickSize + pointerSize, center.y)
                          .lineTo(center.x, center.y - (that.capSize / 2))
                          .lineTo(center.x, center.y + (that.capSize / 2))
                          .close();

                return needlePath;
            }
        </script>
Completed
Last Updated: 09 Sep 2019 10:08 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 0
Category: Gauge
Type: Bug Report
0
The underlying Kendo Linear Kendo stopped rendering the track in 2014.3.1314 and, respectively, so does RadLinearGauge as of 2015.1.225

For example, the following snippet should render a wide, green, semi-transparent track, but it does not

			<telerik:RadLinearGauge ID="gauge" runat="server" Height="280">
				<Pointer Value="20">
					<Track Color="#5ca038" Opacity="0.5" Size="30" />
				</Pointer>
			</telerik:RadLinearGauge>