Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > RadialGauge > Markup and Scripting

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.


See Also

Reference