Pointer and no cap

8 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 11 Jun 2014 Link to this post

    Hi Danail,

    As part of my charting upgrade I decided to look at the gauges that I use.  

    I already have a good looking gauge that is generated in some code however it is just done as an image,  what I am trying to do now is to use the existing gauge as a background and overlay the RadGauge on top.

    To that end, is there any way to hide the cap and adjust the length of the pointer?

    Regards

    Jon
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 16 Jun 2014 Link to this post

    Hi Jon,

    You can overlay the RadGauge on top by aligning it with absolute position over the desired part of the page. You can also export the gauge as a png image and use it is a background. Exporting RadHtmlChart to PNG and PDF code library will shed more light on how to do that. Note that the code library is intended for the HtmlChart but can be used for the Gauge as well. The only difference is the way to get the SVG string from RadGauge which is done in the following JavaScript line:

    oGauge._gaugeObject.svg();

    where oGauge is a reference to the desired RadGauge:

    In order to hide the cap of the gauge you can simply match its color to the background color. For example:
    ASPX:
    <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="350px" Width="350px">
        <Appearance BackgroundColor="#FFFFFF" />
        <Pointer Value="220" Color="Black">
            <Cap Color="#FFFFFF" 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>

    Regarding the adjusting the length of the pointer, I am sorry to say that this feature is not supported by the control.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 17 Jun 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    Thanks for this, setting the cap to transparent has worked.  I've got my gauge generation code to have two modes - cap and gauge generation so I now use three layers, gauge then radgauge then gauge cap only.  

    It's looking great as the pointer is now behind the cap image.

    The one thing that I am now having issues is reverse engineering the calc for working out where the centre point of the pointer is.  Obviously the left position isn't tricky however the vertical position seems to be including a variable that I'm unaware of.  

    Given that my gauge can be different sizes the calc is needed.  Could you enlighten me please?

    Best Regards

    Jon
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 20 Jun 2014 Link to this post

    Hello Jon,

    The cap of the gauge is rendered as a circle element in SVG, so that you can obtain the x/y coordinates of this element. For example:
    JavaScript:
    <script type="text/javascript">
        ; (function () {
            var demo = window.demo = window.demo || {};
            function getCirclePosition() {
                var cx, cy;
                cx = $telerik.$('#<%=RadRadialGauge1.ClientID%>').find('circle').attr("cx");
                cy = $telerik.$('#<%=RadRadialGauge1.ClientID%>').find('circle').attr("cy");
                return { "cx": cx, "cy": cy };
            }
            demo.displayCirclePosition = function () {
                alert("cx: " + getCirclePosition().cx + "\ncy: " + getCirclePosition().cy);
            }
            demo.offsetCirclePosition = function () {
                $telerik.$('#<%=RadRadialGauge1.ClientID%>').find('circle').attr("cx", getCirclePosition().cx - 50);
                $telerik.$('#<%=RadRadialGauge1.ClientID%>').find('circle').attr("cy", getCirclePosition().cy - 50);
            }
        })()
    </script>
    ASPX:
    <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="350px" Width="350px">
        <Appearance BackgroundColor="#FFFFFF" />
        <Pointer Value="220" Color="Black">
            <Cap 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>
    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="demo.displayCirclePosition" Text="Get Cap Position" />
    <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" OnClientClicked="demo.offsetCirclePosition" Text="Offset Cap Position" />



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Jun 2014 in reply to Danail Vasilev Link to this post

    Thanks Danail but I need to do this in the code behind before the page is rendered.  Is there a simple calc to get the centre points?
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 20 Jun 2014 Link to this post

    Hello Jon,

    RadGaue (like RadHtmlChart and RadDiagram controls) have an entirely client-side rendering which means that you can obtain this information on the client-side only. What I can suggest, however, is that you use the Sys.Application.add_load() event or its shortcut pageLoad() in order to do that:

    JavaScript:
    function pageLoad() {
        demo.offsetCirclePosition();
        demo.displayCirclePosition();
    }



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Jun 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    I'll give that a shot although what I was really after was the formula that is used on the client side so that I could implement the same calculation at the server side to work out the center of the cap.

    Regards

    Jon
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 23 Jun 2014 Link to this post

    Hi Jon,

    If you want to examine such calculations in the RadGauge rendering I can suggest that you look through the source code of the control. The source code of Telerik UI requires a subscription and it can be downloaded from your account.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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