Possible to change "thickness" of color ranges?

5 posts, 0 answers
  1. Greg
    Greg avatar
    1 posts
    Member since:
    Sep 2013

    Posted 30 Oct 2013 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 01 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Bei
    Bei avatar
    1 posts
    Member since:
    Apr 2015

    Posted 10 Apr 2015 in reply to Danail Vasilev Link to this post

    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

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 15 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017