This is a migrated thread and some comments may be shown as answers.

Possible to change "thickness" of color ranges?

4 Answers 245 Views

Gauge

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 01 Nov 2013, 09:27 AM

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

<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.

answered on 01 Nov 2013, 05:09 PM

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.