Configuring Ranges (igRadialGauge)

Topic Overview

Purpose

This topic provides a conceptual overview of the igRadialGauge™ control’s ranges. It describes the properties of the ranges and provides an example of how to add ranges to the radial gauge.

Required background

The following topics are prerequisites to understanding this topic:

igRadialGauge: This section gives you an overview of the igRadialGauge™ control and its main features.
Adding igRadialGauge: This topic explains using a code example how to add the igRadialGauge™ control to a page.

In this topic

This topic contains the following sections:

Ranges Overview

Ranges overview

A range highlights a set of continuous values bound by a specified minimum and maximum value on a gauge scale. You can add multiple ranges to a scale, specifying different brushes, along with starting and ending values. To add a range to the igRadialGauge control, create a radialGaugeRange object and add it to the Ranges collection.

Preview

The following image is a preview of the igRadialGauge control with the three ranges added to it (0-30; 30-70 and 70-100):

Range Properties

Range properties summary

The following table summarizes the properties of the radialGaugeRange:

Property Name	Property Type	Description
`brush`	brush	The color assigned to the range
`startValue`	double	The starting value at which to begin the range
`endValue`	double	The ending value at which to end the range
`innerStartExtent`	double	The distance from the center of the gauge (typically from 0 to 1) at which to start rendering the inner sweep of the range. Use values further from 0 than 1 to make the range extend beyond the normal radius of the gauge.
`innerEndExtent`	double	The distance from the center of the gauge (typically from 0 to 1) at which to end rendering the inner sweep of the range. Use values further from 0 than 1 to make the range extend further than the normal radius of the gauge.
`outerStartExtent`	double	The distance from the center of the gauge (from 0 to 1) at which to start rendering the outer sweep of the range. Use values further from 0 than 1 to make this extend further than the normal radius of the gauge.
`outerEndExtent`	double	The distance from the center of the gauge (from 0 to 1) at which to end rendering the outer sweep of the range. Use values further from 0 than 1 to make this extend further than the normal radius of the gauge.

Configuring the Range

Example

The following screenshot demonstrates how the igRadialGauge control renders using this igRadialGaugeRange configuration:

Property	Value
`brush`	Blue
`startValue`	70
`endValue`	100
`outerStartExtent`	0.55
`outerEndExtent`	0.65

The following is the code that implements this example:

In JavaScript:

$("#gauge").igRadialGauge({
    width: "400px",
    height: "400px",
    ranges: [{
        name: "range1",
        brush: "rgba(164, 189, 41, 1)",
        startValue: 70,
        endValue: 100,
        outerStartExtent:  0.55,
        outerEndExtent: 0.65
    }]                                      
});

Ignite UI | Help Topics