Telerik UI for Windows 8 HTML

Here you can see examples and description of the properties and features specific to RadLinearGauge.

Controlling the orientation of the gauge

Normally, RadLinearGauge is vertically oriented. You can change this, based on your requirement, by setting the vertical property of the control to false.

Controlling the Orientation of the Gauge Example Copy imageCopy
var orientationGaugeCtrl = new Telerik.UI.RadLinearGauge(document.getElementById("orientationGauge"), {
    value: 24,
    min: 10,
    max: 30,
    vertical: false,
    pointer: {
        color: "#1e98e4"
    }
});
Horizontal linear gauge

Mirroring the Scale

The ticks and labels are normally shown on the left side of the scale if the gauge is vertical and under the scale when the gauge is horizontally oriented. When the mirror property is set to true, they will be rendered on the right side (vertical gauge) and above the scale (horizontal gauge). The following code snippet renders a linear gauge with mirrored scale.

Mirroring the Scale Example Copy imageCopy
var mirroredGaugeCtrl = new Telerik.UI.RadLinearGauge(document.getElementById("mirroredGauge"), {
    value: 24,
    min: 10,
    max: 30,
    mirror: true,
    pointer: {
        color: "#1e98e4"
    }
});
gauge-linear-mirrored

Setting the Pointer

You can access and customize the pointer of RadLinearGauge through its pointer property. This property gets the pointer settings represented by the internal Telerik.UI.Gauge._LinearPointerConfiguration class. To see all properties exposed by it, check _LinearPointerConfiguration. These properties allow you to customize track appearance, shape, size and other, basic styles of the pointer.

The following code snippets declare a gauge with different pointer shapes. When the pointer shape is set to "barIndicator" (the dafault value), you can also customize the track used by the pointer. The track appearance is controlled by the properties listed in the _LinearPointerTrackConfiguration internal class.

Bar Indicator Pointer Copy imageCopy
var barIndicatorPointerGaugeCtrl = new Telerik.UI.RadLinearGauge(document.getElementById("barIndicatorPointerGauge"), {
    value: 24,
    min: 10,
    max: 30,
    pointer: {
        color: "#1e98e4",
        shape: "barIndicator",
        track: {
            color: "#b3e0f1"
        }
    }
});
Arrow Pointer Copy imageCopy
var arrowPointerGaugeCtrl = new Telerik.UI.RadLinearGauge(document.getElementById("arrowPointerGauge"), {
    value: 24,
    min: 10,
    max: 30,
    pointer: {
        color: "#1e98e4",
        shape: "arrow",
        track: {
            color: "#b3e0f1"
        }
    }
});
Gauge pointer shapes

Hiding the Scale Line

If you want to display only the ranges and pointer, without the scale line, you can set the line.visible property of RadLinearGauge to false. You can use this in a scenario where you want to display only the colored ranges and the pointer, similarly to the following example:

Hiding the Scale Line Example Copy imageCopy
var hiddenLineGaugeCtrl = new Telerik.UI.RadLinearGauge(document.getElementById("hiddenLineGauge"), {
    min: 0,
    max: 20,
    value: 5,
    ranges: [{
        from: 0,
        to: 10,
        color: '#1e98e4'
    }, {
        from: 10,
        to: 20,
        color: '#40607f'
    }],
    pointer: {
        shape: 'arrow'
    },
    line: {
        visible: false
    }
});
gauge-linear-hidden-line

See Also