[Solved] Target Tick

[Brendan]

Hello, 

This sort of goes with a previous post i had that has to do with manipulating individual ticks. I want to be able to create a target on the gauge either using a bar or specifying a tick as the target. As of now i have just been setting a range on the gauge as the target but i want something that stands out more. Is there a way to set a target that is supported or possibly i can change the width of just the target range that i have set so that it stands out from the other ranges? I think something like this is supported in the XAML version of the control but i haven't seen anything as far as html goes. 

Thanks in advance for your help!

[Tsvetina]

Hi Brendan,

The ranges width is defined for all ranges together by the rangeSize property. The current individual settings per range are from, to and color, so for highlighting a range out of others, you can adjust its color to be in contrast to others:

<div data-win-control="Telerik.UI.RadRadialGauge" data-win-options="{
    min: 90,
    max: 100,
    majorUnit: 2,
    value: 95,
    labels: {
        template: '#=[90,92,96,100].indexOf(value)!=-1 ? value: ""#'
    },
    majorTicks: {
        visible: false
    },
    minorTicks: {
        visible: false
    },
    ranges: [
        {
            from: 90,
            to: 92,
            color: 'gray'
        },
        {
            from: 92,
            to: 96,
            color: 'limegreen'
        },
        {
            from: 96,
            to: 100,
            color: 'gray'
        }
    ]
}">
</div>

The result looks like this:


It is in the planning to also add opacity setting for ranges but it will be available no earlier than the service pack for Q1 2013.

Kind regards,
Tsvetina
the Telerik team

[Brendan]

Thank you this information is very helpful! 

To continue this a little further, the target I want to include on my gauge is a single number. Is it possible to include text in a tick label that represents a number? For example, say on the gauge above I have a target value of 97 and i want a tick there to label that target. Is it possible to create the tick at that point and then change that ticks label to the string "target" or something like that? Or perhaps even to change the color of just that tick? 

Thanks!

[Tsvetina]

Hello Brendan,

To achieve the look from my previous reply, all ticks have been hidden. Showing a single one is not possible, so it is again the ranges that you can manipulate.

For example, you can add a range from 96.9 to 97 (or 97.1 for better visibility, depending on your gauge size) and color it differently. Also, for a more complex logic of the labels content, you can use a templating function. Here is the suggested code (which shows labels for 90, 92, 96 and 100 and text "target" instead of 97):

<div data-win-control="Telerik.UI.RadRadialGauge" data-win-options="{
    min: 90,
    max: 100,
    majorUnit: 1,
    value: 95,
    labels: {
        template: Sample.getTemplate
    },
    majorTicks: {
        visible: false
    },
    minorTicks: {
        visible: false
    },
    ranges: [
        {
            from: 96.9,
            to: 97,
            color: 'limegreen'
        }
    ]
}">
</div>

WinJS.Namespace.define("Sample", {
    getTemplate: WinJS.Utilities.markSupportedForProcessing(function (args) {

        if (args.value == 97) {
            return "    target";
        }
        else if ([90, 92, 96, 100].indexOf(args.value) != -1) {
            return args.value;
        }
        else {
            return "";
        }
    })
});

 
The non-breaking space ( ) is used to align this label with the ones containing shorter text.

Here is the result:

Kind regards,
Tsvetina
the Telerik team