Telerik UI for Windows 8 HTML

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

Defining the Start and End Angles

Using the startAngle and endAngle properties of RadRadialGauge you can define the angle at which the radial scale will start and end. The scale is rendered clockwise, where a start angle of 0 is equal to 180 degrees in the polar coordinate system.

By setting the startAngle and endAngle properties accordingly, you can easily create half- and quarter-circle gauges. The below example demonstrates how a quarter gauge can be defined:

Defining the Start and End Angles Example Copy imageCopy
var startEndAngleGaugeCtrl = new Telerik.UI.RadRadialGauge(document.getElementById("startEndAngleGauge"), {
    startAngle: 90,
    endAngle: 180,
    value: 50,
    pointer: {
        color: "#1E98E4"
    },
    width: 400
});
gauge-radial

Positioning the Ranges

You can define the distance of ranges from the edge of the scale by setting a value to the rangeDistance property. It accepts both positive and negative numeric values. A positive value will show the ranges closer to the center of the gauge, while a negative will render the ranges outside of the circle of the scale.

Positioning the Ranges Example Copy imageCopy
var rangesPositioningGaugeCtrl = new Telerik.UI.RadRadialGauge(document.getElementById("rangesPositioningGauge"), {
    min: 0,
    max: 6,
    majorUnit: 1,
    theme: "light",
    value: 4,
    ranges: [{
        from: 5.5,
        to: 6,
        color: "red"
    }, {
        from: 4.5,
        to: 5.5,
        color: "orange"
    }],
    rangeSize: 3,
    rangeDistance: 30,
    width: 400
});
Positioning the ranges

Setting the Pointer

You can access and customize the appearance of the pointer of RadRadialGauge through the control's pointer property. This property gets the pointer settings represented by the internal Telerik.UI.Gauge._RadialPointerConfiguration class. To see the properties exposed by it, check _RadialPointerConfiguration. These properties allow you to customize the colors and size of the pointer.

The example below sets custom colors to the pointer and the pointer cap, as well as a size to the cap. The capSize property accepts values from 0 to 1 representing the part of the whole circle, drawn by the gauge, that will be taken up by the cap.

Setting the Pointer Example Copy imageCopy
var customizedPointerGaugeCtrl = new Telerik.UI.RadRadialGauge(document.getElementById("customizedPointerGauge"), {
    min: 0,
    max: 6,
    majorUnit: 1,
    majorTicks: {
        size: 10
    },
    minorTicks: {
        size: 6
    },
    value: 4,
    pointer: {
        capColor: "#336699",
        capSize: 0.1,
        color: "#33ccff"
    },
    width: 400
});
Setting the pointer

See Also