Gauge options

[James]

I know that the Gauge is a brand new offering to the ASP.NET controls collection.  I am working on an ASP.NET web application to mimic a similar Windows client using the Telerik WPF controls.  Obviously the WPF controls have a great number more options for display.  I was wondering if there are any ideas from anyone on how to implement some of these control options using the ASP.NET controls?  

In particular are the bezel color around the different radial controls, including the semi-circle and quadrant style radial gauges.  The back ground when set shows a square background for radial gauges.  Is there anyway for this background to be a circle instead of a square?  Any expectations of more control to the Gauge controls in the near future?

Thanks,

James

[Danail Vasilev]

Hello James,

It is not possible to set bezel color directly. You can, however, create a custom image that simulates the bezel and use it as a background image to the RadGauge. You can refer to the overview demo of RadGauge on how to do that.

Regarding your next questions about the Semi-circle and Quadrant style RadialGauges, you can configure the RadRadialGauge, so that its style looks like the WPF's through StartAngle and EndAngle properties, exposed by the Scale of the Gauge. For example if you want Semi-circle Gauge you can use the following settings:

• StartAngle="0" EndAngle="180" - North orientation
• StartAngle="180" EndAngle="360" - South orientation
• StartAngle="90" EndAngle="270" - East orientation
• StartAngle="270" EndAngle="450" - West orientation

The same logic can be applied for Quadrant-style Gauge:

• StartAngle="0" EndAngle="90" - North-West orientation
• StartAngle="90" EndAngle="180" - North-East orientation
• StartAngle="180" EndAngle="270" - South-East orientation
• StartAngle="270" EndAngle="360" - South-West orientation

You can refer to the full list of Gauge' server-side API here.

Regarding the shape of the background color in RadGauge it cannot be changed. You can, however, put below the Gauge either a custom image or a HTML element that has the desired shape and color.

If you have, however, any particular feature requests related to the RadGauge or other Telerik products, you are more than welcome to share them with us.

Regards,
Danail Vasilev
the Telerik team

[James]

I for one would like to see the ability to control an appropriately shaped border for the linear and radial gauges that would allow distinct color selections for the bezel of the gauge and the background of the gauge.  Because of the possible number of color combinations required for the border  and the shapes of the radial gauge (full, half, quarter) and the different directions of the half and quarter gauges, it does not make sense to have a library with so many different images.

I would love to hear any particular workarounds that others may think of to get around this problem.  Please consider adding these options to the gauge control.

James

[Danail Vasilev]

Hi James,

Thank you for your suggestions.

I have logged your idea in our feedback portal here, so that you can monitor, comment and vote on it. If it gets enough votes and approval from our management you can expect it to be implemented in the future.

I have also updated your Telerik points for sharing your ideas with us.

Greetings,
Danail Vasilev
the Telerik team

[James]

Another idea for the linear asp.net gauge control.  Is it possible to offer the ability to have both the pointer show up as the arrow pointer and also allow have the bar indicator show up so that the colored bar runs out to the value where the arrow pointer is pointing to.  I am trying to reflect functionality that exists in the WPF Gauge control.  I have a screenshot attached to show what I mean.


If this functionality is somehow available please let me know as soon as possible, but I don't see how it can be done.

Thanks,

James

[Danail Vasilev]

Hi James,

In the current version of RadControls, multiple pointers are not supported in the RadGauge. Therefore I am afraid that the desired functionality is not supported neither. However, a feature request related to multiple pointers support in RadGauge has already been logged as a PITS item here, so that you can monitor, comment or raise its priority by voting on it.

For the time being you can achieve the mentioned functionality by overlaying the two LinearGauges. For example:

<div style="position: relative">
    <div style="position: absolute; top: 0px; left: 3px">
        <telerik:RadLinearGauge ID="RadLinearGauge1" runat="server">
            <Pointer Value="45" Shape="BarIndicator">
            </Pointer>
            <Scale Min="0" Max="60">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>
    <div style="position: absolute; top: 0px; left: 0px">
        <telerik:RadLinearGauge ID="RadLinearGauge2" runat="server">
            <Pointer Value="25" Shape="Arrow" Color="Black">
            </Pointer>
            <Scale Min="0" Max="60">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>
</div>

Kind regards,
Danail Vasilev
the Telerik team

[James]

I have what appears to be a bug in the linear gauge control.  I am trying to do as you showed in this thread above and overlay two gauges to get the pointer effect of both the arrow and slider pointer.  When setup as you showed above the gauges overlayed one another without any problem.

When setup as I have below the gauges are no longer the same size.  The lengths of the two are different.  The problem appears to happen when adding the markup for the MinorTicks-Size and MajorTicks-Size to both.  The gauge that has the arrow shaped pointer is shortened when adding the markup.

Please take a look at this and let me know what I can do to make this work.

Thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HorizontalLinear.aspx.cs" Inherits="RadControlsWebApp1.HorizontalLinear" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"/>
            </Scripts>
        </telerik:RadScriptManager>
<div style="position: relative">
    <div style="position: absolute; top: 0px; left: 0px">
        <telerik:RadLinearGauge ID="RadLinearGauge1" runat="server" Transitions="True" Width="432" Height="140">
            <Pointer Value="25" Shape="BarIndicator" Size="28"></Pointer>
            <Scale Min="0" Max="10" Vertical="False" Mirror="True">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>
    <div style="position: absolute; top: 2px; left: 0px">
        <telerik:RadLinearGauge ID="RadLinearGauge2" runat="server" Transitions="True"  Width="432" Height="140">
            <Pointer Value="25" Shape="Arrow" Color="Black"></Pointer>
            <Scale Min="0" Max="10" Vertical="False" Mirror="True"  MinorTicks-Size="35" MajorTicks-Size="42">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>
</div>

    </form>

</body>
</html>

[Danail Vasilev]

Hi James,

Note that when you change:

• the Size property of the MinorTick in LinearGauge, the width of the ranges will be resized proportionately.
• the Size property of the MajorTicks in LinearGauge and the size of the Pointer is not set, the Pointer itself will be resized proportionately.

More information on the above scenario is available in LinearGauge Pointer and Range Size help article.

Therefore it is normal when you set the size property of the Minor/Major Ticks, the proportions of the RadGauge to be resized respectively. What I can suggest you in that case is to either evade the setting of these properties or fine tune the alignment of both gauges through the custom CSS.

Greetings,
Danail Vasilev
the Telerik team

[James]

Danail,

I am not speaking of the width of the range, I am speaking of the length of the gauge.  I was mistaken about the cause of the bug but it appears to be associated with the pointer size that is chosen instead of the Tick size.  Look at the code that I post here and change the size of the pointer.  With both gauges set up identically except for the pointer size, you will notice that the length of the gauge changes when the pointer size changes.  I have also attached a screen shot of the gauges next to one another for you to see.

Please let me know what can be done to resolve this problem.

James

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HorizontalLinear.aspx.cs" Inherits="RadControlsWebApp1.HorizontalLinear" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"/>
            </Scripts>
        </telerik:RadScriptManager>
            <div style="position: absolute; top: 0px; left: 0px">
                <telerik:RadLinearGauge ID="RadLinearGauge1" runat="server" Transitions="True"  Width="432" Height="140">
                    <Pointer Value="5" Shape="Arrow" Color="Black" Size="35"></Pointer>
                    <Scale Min="0" Max="10" Vertical="False" Mirror="True" MajorTicks-Size="25" MinorTicks-Size="20">
                        <Ranges>
                            <telerik:GaugeRange From="0" To="20" Color="red" />
                            <telerik:GaugeRange From="20" To="40" Color="blue" />
                            <telerik:GaugeRange From="40" To="60" Color="green" />
                        </Ranges>
                    </Scale>
                </telerik:RadLinearGauge>
            </div>
        </div>
            <div style="position: absolute; top: 40px; left: 0px">
                <telerik:RadLinearGauge ID="RadLinearGauge2" runat="server" Transitions="True"  Width="432" Height="140">
                    <Pointer Value="5" Shape="Arrow" Color="Black" Size="15"></Pointer>
                    <Scale Min="0" Max="10" Vertical="False" Mirror="True" MajorTicks-Size="25" MinorTicks-Size="20">
                        <Ranges>
                            <telerik:GaugeRange From="0" To="20" Color="red" />
                            <telerik:GaugeRange From="20" To="40" Color="blue" />
                            <telerik:GaugeRange From="40" To="60" Color="green" />
                        </Ranges>
                    </Scale>
                </telerik:RadLinearGauge>
            </div>
        </div>
    </form>
</body>
</html>

[Vessy]

Hi James,

I managed to reproduce the described issue and escalated it to our developers for further investigation.

Unfortunately, the only workaround you could use for the moment is to set different width to both of the charts, regulating the fix position, so they would be displayed with one and the same size. For example:

<div style="position: absolute; top: 0px; left: 0px">
        <telerik:RadLinearGauge ID="RadLinearGauge1" runat="server" Transitions="True" Width="450"
            Height="140">
            <Pointer Value="5" Shape="Arrow" Color="Black" Size="35">
            </Pointer>
            <Scale Min="0" Max="10" Vertical="False" Mirror="True" MajorTicks-Size="25" MinorTicks-Size="20">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>
    <div style="position: absolute; top: 40px; left: 10px">
        <telerik:RadLinearGauge ID="RadLinearGauge2" runat="server" Transitions="True" Width="432"
            Height="140">
            <Pointer Value="5" Shape="Arrow" Color="Black" Size="15">
            </Pointer>
            <Scale Min="0" Max="10" Vertical="False" Mirror="True" MajorTicks-Size="25" MinorTicks-Size="20">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>

Please, excuse us the temporary inconveniences.

All the best,
Veselina Raykova
the Telerik team

[James]

Veselina,

Because I am using this with a dynamic control i can't just set a static number and expect it to be correct if the control is resized.    My application dynamically creates the controls based on a saved template created in a designer surface.  I will have to come up with some sort of formula that takes into account the differences in length and percent difference of length between the two gauge types with the different lengths.

When will a fix be available for this bug?

Thanks,

James

[Danail Vasilev]

Hello James,

The mentioned issue with the resizing of the Gauge's width (indeed the Track's width is resized) when the Pointer size is modified is an expected behavior which is caused due to the recalculation of the dimensions of the Gauge and its elements.

What I can suggest you in that case is to set the second Gauge as follows:

• remove the colors of the GaugeRanges
• set the visible property of the MajorTicks and MinorTicks to false
• set the visible property of the Labels to false

For example:

<div style="position: relative">
    <div style="position: absolute; top: 0px; left: 0px">
        <telerik:RadLinearGauge ID="RadLinearGauge2" runat="server" Transitions="True" Width="450"
            Height="140">
            <Pointer Value="5" Shape="BarIndicator" Color="Black" Size="15">
            </Pointer>
            <Scale Min="0" Max="100" Vertical="False" Mirror="True" MajorTicks-Size="25" MinorTicks-Size="20">
                <Ranges>
                    <telerik:GaugeRange From="0" To="20" Color="red" />
                    <telerik:GaugeRange From="20" To="40" Color="blue" />
                    <telerik:GaugeRange From="40" To="60" Color="green" />
                </Ranges>
            </Scale>
        </telerik:RadLinearGauge>
    </div>
    <div style="position: absolute; top: 15px; left: 0px">
        <telerik:RadLinearGauge ID="RadLinearGauge1" runat="server" Transitions="True" Width="450"
            Height="140">

            <Pointer Value="15" Shape="Arrow" Color="Black" Size="35">
            </Pointer>
            <Scale Min="0" Max="100" Vertical="False" Mirror="True" MajorTicks-Size="25" MinorTicks-Size="20">
                <Labels Visible="false" />
                <MajorTicks Visible="false" />
                <MinorTicks Visible="false" />
            </Scale>
        </telerik:RadLinearGauge>
    </div>
</div>

Note that multiple pointers functionality of the RadGauge is not supported, so the above is just a workaround that may not work properly in each and every case. This feature request is logged as a PITS item here, and you can raise its priority by voting on it.

Regards,
Danail Vasilev
Telerik

[James]

Danail Vasilev,
Setting up the gauges in this manner still does not change the fact that there appears to be an issue with the two gauges reflecting the same size and value location on the scale when created side by side, especially when the multiple indicators is not supported and using the two gauges in this manner is the suggested way of obtaining this sort of functionality. 

Can you please let your development team know that since the WPF component has this sort of functionality, it would be nice for the ASP.NET component to have the same.

Thanks,

James

[Danail Vasilev]

Hello James,

I am sorry to hear that the provided example did not fit in your scenario.

The process of implementation of particular feature request initially steps through gaining enough votes and then approval from our management. Currently there are controls having feature requests that gain more votes than the mentioned one which means they have higher priority over it.

What we actually do by logging feature requests/issue in public items and giving links to them to our clients is to give the freedom of the clients to decide which are the most wanted feedback items, so we can implement them. As the items get more votes our developers might consider their implementation for the future.

Regards,
Danail Vasilev
Telerik