Pointer and no cap

[Jon]

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

[Danail Vasilev]

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

 

 

[Jon]

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

[Danail Vasilev]

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

 

 

[Jon]

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?

[Danail Vasilev]

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

 

 

[Jon]

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

[Danail Vasilev]

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