Horizontal Gauge Color Range

• Overview
• Color Ranges Parameters
• Ranges boundaries
• Coloring Ranges
• Positioning color ranges
• Range Labels

Overview

Color ranges are used to color certain areas of the gauge to make it more informative. For example, you may split the scale into 3 areas: green, yellow and red according to their values. Size of color ranges is set in percents of the whole area and, therefore, color range can have different shapes. Each color_range node should be placed inside color_ranges node, and color_ranges must lie within axis node.

Typical XML settings for the ranges are:

 

Color Ranges Parameters

The following attributes can be set for ranges:

Attribute	Values	Default	Description
start	Number	Auto	Sets start of color range (value according to current axis scale)
end	Number	Auto	Sets start of color range (value according to current axis scale)
start_size	Number	Auto	Start size of range
end_size	Number	Auto	End size of range
padding	Number	Auto	The padding of ranges
align	Inside | Outside | Center	Center	Sets the position of ranges

Ranges boundaries

You can decide where to start you color range from and where end it. Let's, for example, draw one color range from values of 30 to 90.

In our sample it looks like this:

Coloring Ranges

You can set a color of your range using fill, hatch_fill, border, effects subnodes of color_range node. So let's use 3 colors (and respectively 3 ranges) to color our scale:

 

Positioning Ranges

You can set align of your color ranges using align and padding nodes and also define start_size and end_size of your ranges (in goes in percents of gauge height).

For example we can set start_size to "100" and end_size to "%AxisSize*1". The last means that the height of our range will have the same width as axis size. Or we set start_size to "%AxisSize*1" and end_size to "%AxisSize*0.5".

Also the sizes of the can be totally presented in numbers, without using "%AxisSize" keyword. start_size to "50", end_size to "30".

In the sample below we will show a sample Volume gauge, using color ranges to show different sound levels and one range to show scale increase direction.

 

Labels

You can add labels that describe the range and adjust the position of these labels.

Just like for axis labels or tickmarks you can set align and padding for color ranges.

In this sample we've added the descriptions to all color ranges in the gauge.