The HTML markup for a wijradialgauge widget looks like this.
Markup |
Copy Code |
---|---|
<div id="gauge"></div> |
You can initialize the widget with the following jQuery script that customizes all of the options.
Script |
Copy Code |
---|---|
<script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, startAngle: -45, sweepAngle: 270, radius: "auto", islogarithmic: false, origin: { x: 0.5, y: 0.5 }, labels: { offset: 27, style: { fill: "#1E395B", "font-size": 12, "font-weight": "800" } }, tickMinor: { position: "inside", offset: 30, style: { "height": 3, "width": 10, fill: "#1E395B", stroke: "#E7EFF8" }, interval: 5, visible: true }, tickMajor: { position: "inside", offset: 27, style: { fill: "#1E395B", "height": 4, "width": 20, stroke: "#E7EFF8", "stroke-width": "1.5" }, interval: 25, visible: true }, ranges: [{ startWidth: 2, endWidth: 5, startValue: 0, endValue: 10, startDistance: 1, endDistance: 0.98, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" } }, { startWidth: 5, endWidth: 20, startValue: 10, endValue: 125, startDistance: 0.98, endDistance: 0.9, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": "0" } }, { startWidth: 20, endWidth: 25, startValue: 125, endValue: 150, startDistance: 0.9, endDistance: 0.86, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" } }], face: { style: { fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" } }, pointer: { length: 0.8, offset: 0, shape: "rect", width: 6, style: { fill: "#1E395B", stroke: "#1E395B" } }, cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" } } }); }); </script> |
The markup and script featured here results in the following widget.