Configuring Needles (igRadialGauge)

Topic Overview

Purpose

This topic provides a conceptual overview of needles with the igRadialGauge™ control. It describes the properties of the needles and also provides an example of how to configure them.

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:

Needles Overview

Needles overview

A gauge needle is a visual element used to signify a gauge set value and consists of needle cap overlays or underlays; the gauge needle’s pivot point. The supported needle shapes and caps are set using the needleShape and needlePivotShape properties. For a visual representation of the different needle shape and the pivot shape refer to the needle sample

Preview

The following image is a preview of the igRadialGauge control with the needle’s value property set to 60:

Needle Properties

Needle properties summary

The following table summarizes the properties the igRadialGauge control related to the needle:

Property Name	Property Type	Description
`value`	`double`	Determines the value on the gauge to which the needle points.
`needleStartExtent`	`double`	Determines the beginning position of the needle, measured from the center of the gauge. The value of this property should be between -1 and 1.
`needleEndExtent`	`double`	Determines the ending position of the needle , measured from the center of the gauge. The value of this property should be between -1 and 1.
`needleStartWidthRatio`	`double`	Determines the width of the needle at its point. The value of this property should be between 0 and 1.
`needleEndWidthRatio`	`double`	Determines the width of the needle at its base. The value of this property should be between 0 and 1. This has no effect unless the `needleShape` property is set to any of the following values: rectangle trapezoid rectangleWithBulb trapezoidWithBulb
`needleShape`	`radialGaugeNeedleShape`	Determines which of the predefined needle shapes to use: rectangle triangle trapezoid rectangleWithBulb triangleWithBulb needleWithBulb trapezoidWithBulb
`needlePivotShape`	`radialGaugePivotShape`	Determines the pivot shape to use for the needle. It can be set to: circle circleWithHole circleOverlay circleOverlayWithHole circleUnderlay circleUnderlayWithHole
`needleBrush`	`brush`	Determines the brush of the gauge needle.
`needleOutline`	`brush`	Determines the brush to use forthe outline needle.
`needlePivotBrush`	`brush`	Determines the fill brush for the needle pivot shape. This pivot brush only applies to the pivot shapes that draw an overlay or an underlay. Otherwise, this setting has no effect on the pivot shape.
`needlePivotOutline`	`brush`	Determines the brush of the outlines of the needle pivot shape. This pivot brush only applies to the pivot shapes that draw an overlay or an underlay. Otherwise, this setting has no effect on the pivot shape.

Configuring the Needle

Example

The following screenshot demonstrates how the igRadialGauge control with the properties of the needle looks as a result of the following setting:

Property	Value
`value`	60
`needleEndExtent`	0.5
`needleShape`	rectangle
`pivotShape`	circleWithHole

The following is the code that implements this example:

In JavaScript:

$("#gauge").igRadialGauge({
    width: "400px",
    height: "400px",
    value: 60,
    endExtent: 0.5,
    needleShape: "rectangle",
    needlePivotShape: "circleWithHole"                                  
});

Ignite UI | Help Topics