wijradialgauge Step 2 of 3: Initializing the Widget

In the previous step, you added markup to add the content that will appear in the radial gauge. In this step, you'll add the jQuery script needed to initialize the widget.

Complete the following step:

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijradialgauge widget:

<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, //4F6B82
            style: {
            fill: "#1E395B",
            "font-size": "12pt",
            "font-weight": "800"
            }
        },
        tickMinor: {
            position: "inside",
            offset: 30,
            style: {
            fill: "#1E395B",
            stroke: "#E7EFF8"
            },
            interval: 5,
            visible: true
        },
        tickMajor: {
            position: "inside",
            offset: 27,
            style: {
            fill: "#1E395B",
            stroke: "#E7EFF8",
            "stroke-width": "1.5"
            },
            interval: 25,
            visible: true
        },
        ranges: [
        {
            startWidth: 2,
            endWidth: 5,
            startValue: 0,
            endValue: 10,
            startDistance: 0.6,
            endDistance: 0.58,
            style: {
            fill: "#7BA0CC",
            stroke: "#7BA0CC",
            "stroke-width": "0"
            }
        },
        {
            startWidth: 5,
            endWidth: 20,
            startValue: 10,
            endValue: 125,
            startDistance: 0.58,
            endDistance: 0.54,
            style: {
            fill: "0-#B4D5F0-#B4D5F0",
            stroke: "#FFFFFF",
            "stroke-width": "0"
            }
        },
        {
            startWidth: 20,
            endWidth: 25,
            startValue: 125,
            endValue: 150,
            startDistance: 0.54,
            endDistance: 0.5,
            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>

This script will initialize the widget.

You have created an application and added and initialized the wijradialgauge widget. In the next step, in wijradialgauge Step 3 of 3: Running the Project, you'll view the run-time interactions of the widget.