Possible to change "thickness" of color ranges?

[Greg]

Hello,

I'm using the rad controls radial gauge and have 4 ranges of various colors in the gauge.  My issue is that the color bands appear very thin.  Is it possible to adjust the thickness of these bands so they are more easily visible?  Thanks.

Greg

[Shinu]

Hi Greg,

One suggestion is to set a larger width and height for the RadRadialGauge. Please check the following sample code I tried.

ASPX:

<telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="350px" Width="350px">
    <Pointer Value="110" Color="OrangeRed">
        <Cap Color="Black" Size="0.1" />
    </Pointer>
    <Scale Min="0" Max="120" MajorUnit="30" MinorUnit="5">
        <Labels Format="{0} Kmph" Position="Outside" />
        <Ranges>
            <telerik:GaugeRange Color="Orange" From="30" To="60" />
            <telerik:GaugeRange Color="Green" From="60" To="90" />
            <telerik:GaugeRange Color="Red" From="90" To="120" />
        </Ranges>
    </Scale>
</telerik:RadRadialGauge>
<br />
<br />
<telerik:RadRadialGauge runat="server" ID="RadRadialGauge2">
    <Pointer Value="110" Color="OrangeRed">
        <Cap Color="Black" Size="0.1" />
    </Pointer>
    <Scale Min="0" Max="120" MajorUnit="30" MinorUnit="5">
        <Labels Format="{0} Kmph" Position="Outside" />
        <Ranges>
            <telerik:GaugeRange Color="Orange" From="30" To="60" />
            <telerik:GaugeRange Color="Green" From="60" To="90" />
            <telerik:GaugeRange Color="Red" From="90" To="120" />
        </Ranges>
    </Scale>
</telerik:RadRadialGauge>

Thanks,
Shinu.

[Danail Vasilev]

Hi Greg,

I have already replayed to the ticket opened by you, so I am pasting my answer here, for the rest of the community:

The desired functionality is not available in RadGauge yet. Such a feature request, however, has already been logged in our feedback portal here, so that you can monitor, comment or raise it priority by voting on it. For the time being the range size can be set through the _gaugeObject of the gauge on the client. For example:
JavaScript:

<script type="text/javascript">
    function pageLoad() {
        var gauge = $find("<%=RadRadialGauge1.ClientID%>");
        gauge._gaugeObject.options.scale.rangeSize = 30;
        gauge.repaint();
    }
</script>

ASPX:

    <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>
</form>

Regards,
Danail Vasilev
Telerik

[Bei]

Hello,

When I try to use

gauge._gaugeObject.options.scale.rangeSize = 30;        

gauge.repaint();

the gauge_gaugeObject.options.scale.rangeSize is undefined,there is a
gauge._gaugeObject.scale.options.rangeSize which is defined but when I set to a
larger value, the scale thickness is not changed.

 

Can someone help?

Bei

[Danail Vasilev]

Hi,

The provided example on 01-Nov-2013 works properly on my side - http://screencast.com/t/WjfSGmu7Yv3 If you are not using latest Telerik UI - 2015.1.401, does upgrading to it helps? Can you also paste below the gauge setup that reproduces the issue?

Regards,
Danail Vasilev
Telerik