Provide Colorized Ranges

Building on the Quick Start example, you can add an array of ranges to your gauge to indicate hot zones or other custom zones of the gauge sweep.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which adds four ranges, a grey one which spans the entire sweep of the gauge, and yellow, orange, and red ranges that indicate increasing levels of danger.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#radialgauge1").wijradialgauge({ value: 90, max: 100, min: 0, ranges: [{ startWidth: 10, endWidth: 10, startValue: 0, endValue: 100, startDistance: 0.64, endDistance: 0.64, style: { fill: "Gray", stroke: "none" } }, { startWidth: 10, endWidth: 10, startValue: 40, endValue: 60, startDistance: 0.58, endDistance: 0.58, style: { fill: "Yellow", stroke: "Yellow", "stroke-width": 1.5 } }, { startWidth: 10, endWidth: 10, startValue: 60, endValue: 80, startDistance: 0.58, endDistance: 0.58, style: { fill: "Orange", stroke: "Orange", "stroke-width": 1.5 } }, { startWidth: 10, endWidth: 10, startValue: 80, endValue: 100, startDistance: 0.58, endDistance: 0.58, style: { fill: "Red", stroke: "Red", "stroke-width": 1.5 } }] }); }); </script>

Script

Copy Code

<script type="text/javascript">
            $(document).ready(function () {
    $("#radialgauge1").wijradialgauge({
        value: 90,
        max: 100,
        min: 0,
        ranges: [{
            startWidth: 10,
            endWidth: 10,
            startValue: 0,
            endValue: 100,
            startDistance: 0.64,
            endDistance: 0.64,
            style: {
                fill: "Gray", stroke: "none"
            }
        }, {
            startWidth: 10,
            endWidth: 10,
            startValue: 40,
            endValue: 60,
            startDistance: 0.58,
            endDistance: 0.58,
            style: {
                fill: "Yellow", stroke: "Yellow", "stroke-width": 1.5
            }
        }, {
            startWidth: 10,
            endWidth: 10,
            startValue: 60,
            endValue: 80,
            startDistance: 0.58,
            endDistance: 0.58,
            style: {
                fill: "Orange", stroke: "Orange", "stroke-width": 1.5
            }
        }, {
            startWidth: 10,
            endWidth: 10,
            startValue: 80,
            endValue: 100,
            startDistance: 0.58,
            endDistance: 0.58,
            style: {
                fill: "Red", stroke: "Red", "stroke-width": 1.5
            }
        }]
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the gauge.
Save your HTML file and open it in a browser. The gauge appears like the one in the live widget below, with a grey range that spans the entire sweep of the gauge, and yellow, orange, and red ranges that indicate increasing levels of danger.

Widgets

Quick Start

Reference

wijradialgauge API