ranges Field

The ranges option, inherited from the jquery.wijmo.wijgauge.js base class, is an array of objects containing all of the options used to draw range bars to highlight where values fall within the gauge.

Type: Array

Default: []

Syntax

Javascript (Usage)
var value; // Type: array value = jQuery.wijmo.wijlineargauge.options.ranges;

Javascript (Specification)
var ranges : array;

Example

This script creates a linear gauge with a range bar 80% of the way down from the top, the left edge of the range bar at the 70 marker and 20% of the height of the gauge, the right edge at the 100 marker and 40% of the height, and rendered with an opacity of 50%, filled with green and outlined in blue.

Javascript

<script type="text/javascript">
    $(document).ready(function () { 
        $("#lineargauge1").wijlineargauge({ 
            value: 31,
            ranges: [{
                startWidth: .2,
                endWidth: .4,
                startValue: 70,
                endValue: 100,
                startDistance: 0.8,
                endDistance: 0.8,
                style: {
                    fill: "green", 
                    opacity: .5,
                    stroke: "blue"
                }
            }]
        }); 
   });
</script>

Remarks

For example, you can create a red range, a yellow range, and a green range. Each range is drawn in the form of a bar. You can control every aspect of each range with the settings detailed below.

Options available for each range include:

startWidth – Sets the thickness of the left side of the range bar as a percentage of the height of the gauge.
endWidth – Sets the thickness of the right side of the range bar as a percentage of the height of the gauge.
startValue – Sets the value at which to begin drawing the range bar. This value must fall between the max and min values you set for the gauge.
endValue – Sets the value at which to end the range bar. This value must fall between the max and min values you set for the gauge.
startDistance – Sets the distance from the top edge of the gauge to draw the left side of the range bar as a percentage of the height of the gauge.
endDistance – Sets the distance from the top edge of the gauge to draw the right side of the range bar as a percentage of the height of the gauge.
style – A value that indicates the fill color and outline color (stroke) of the range bar, as well as the opacity as a percentage. For information on other style options that you can use, please see Style Options.

Browser Compatibility

See Also

Reference