wijradialgauge

The wijradialgauge widget allows you to create common radial gauges, including dials and speedometers. Use simple options to customize their start and sweep angles, tick marks, ranges, and pointer. The wijradialgauge widget is created by the jquery.wijmo.wijradialgauge.js library.

The markup used to create a wijradialgauge widget resembles the following:

<div id="gauge"></div>

The following script initializes 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: {
                        "height": "3px",
                        "width": "10px",
                        fill: "#1E395B",
                        stroke: "#E7EFF8"
                    },
                    interval: 5,
                    visible: true
                },
                tickMajor: {
                    position: "inside",
                    offset: 27,
                    style: {
                        fill: "#1E395B",
                        "height": "4px",
                        "width": "20px",
                        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>

For more information about wijradialgauge, click one of the following external links to view our Wijmo wiki documentation: