Ranges

The range is a visual representation of an interval within a gauge. Ranges are commonly used to mark or emphasize specific zones on the scale. Often the end of the scale is a danger zone and a range can be used to indicate this. The following image illustrates an oval gauge with three ranges (red, yellow and green) specifying different zones on the scale.

The range interval is specified through the MinValue and MaxValue properties. The Alignment and Offset properties control the positioning and the StartWidth and EndWidth properties specify the size of the range. The range can be auto-sized to the scale by setting AutoSize to true. To learn more about the different alignment modes check the Ticks and Labels topic.

Appearance

The Fill and Stroke properties can be used to specify the appearance of the range. The stroke on the different sides of the range can be turned off by using the CapStart, CapEnd, StrokeInside and StrokeOutside properties.

Usage

The sample code below illustrates how to define and add ranges to an existing linear scale:

JavaScript

var range1 = new Range();
range1.minValue = 70;
range1.maxValue = 80;
range1.startWidth = new Length(0);
range1.endWidth = new Length(5, LengthType.Relative);
range1.fill = "yellow";
range1.stroke = "DimGray";
range1.alignment = Alignment.OuterOutside;
range1.offset = new Length(-2);
range1.capEnd = false;

var range2 = new Range();
range2.minValue = 80;
range2.maxValue = 90;
range2.startWidth = new Length(5, LengthType.Relative);
range2.endWidth = new Length(10, LengthType.Relative);
range2.fill = "orange";
range2.stroke = "DimGray";
range2.alignment = Alignment.OuterOutside;
range2.offset = new Length(-2);
range2.capStart = false;
range2.capEnd = false;

var range3 = new Range();
range3.minValue = 90;
range3.macValue = 100;
range3.startWidth = new Length(10, LengthType.Relative);
range3.endWidth = new Length(15, LengthType.Relative);
range3.fill = "red";
range3.stroke = "DimGray";
range3.alignment = Alignment.OuterOutside;
range3.offset = new Length(-2);
range3.capEnd = false;

linearScale.addRange(range1);
linearScale.addRange(range2);
linearScale.addRange(range3);

The linear gauge defined above will look like this: