Customize the Appearance

The wijlineargauge widget's appearance can be easily customized. Simply set the tickMajor, tickMinor, pointer, and face options. See the lineargauge > Level sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/lineargauge/Level for an example.

Complete the following steps to set the pager type:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
Add the following markup within the <body> tags of the page, just after @RenderBody():
<div id="gauge" class="ui-corner-all"></div>
This markup will add a linear gauge widget to the page.
After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlineargauge widget:

<script type="text/javascript">
    $(document).ready(function () {
        $("#gauge").wijlineargauge({
            width: 400,
            height: 70,
            value: 50,
            tickMajor: {
                position: "center",
                factor: 3,
                offset: 5,
                style: { fill: "#efefef", stroke: "none" }
            },
            tickMinor: {
                position: "center",
                visible: true,
                style: { fill: "#efefef", stroke: "none" }
            },
            pointer: {
                length: .6,
                width: 8,
                style: { fill: "180-#FB7800-#C00100", stroke: "#FB7800", opacity: 0.8 }
            },
            face: {
                style: {
                    fill: "270-#C9C9C9-#A6A6A6",
                    stroke: "270-#C9C9C9-#A6A6A6"
                }
            }
        });
        // Position Variables
        var x = 0;
        // Speed - Velocity
        var vx = 0;
        // Acceleration
        var ax = 0;
        var delay = 10;
        var vMultiplier = 0.05;
        if (window.DeviceMotionEvent === undefined) {
            //Device doesn't support motion API
        } else {
            window.ondevicemotion = function (event) {
                ax = event.accelerationIncludingGravity.x;
                //console.log("Accelerometer data - x: " + event.accelerationIncludingGravity.x + " y: " + event.accelerationIncludingGravity.y + " z: " + event.accelerationIncludingGravity.z);
            };
            setInterval(function () {
                vx = vx + ax;
                x = parseInt(x + vx * vMultiplier);
                if (x < 0) { x = 0; vx = 0; }
                if (x > 100) { x = 100; vx = 0; }
                $("#gauge").wijlineargauge("option", "value", x);
            }, delay);
        }
    });
</script>

The wijlineargauge widget will be formatted.

What You've Accomplished

Press F5 to run the application, and notice that the gauge is formatted: