Set the Orientation

The wijlineargauge widget supports both horizontal and vertical orientations. Simply set the orientation option to take advantage of this feature. See the lineargauge > Orientation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/lineargauge/Orientation for an example.

Complete the following steps to set the orientation:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic 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"></div>
<div class="demo-options">
    <select id="orientation">
        <option>horizontal</option>
        <option>vertical</option>
    </select>
</div>
```
This markup will add content for a linear gauge widget and a drop-down box to the page. In the next step, you'll initialize the gauge.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlineargauge widget and set the orientation option:

<script type="text/javascript">
    $(document).ready(function () {
        $("#gauge").wijlineargauge({
            value: 50,
            labels: {
                style: {
                fill: "#1E395B",
                "font-size": "12pt",
                "font-weight": "800"
                }
            },
            tickMajor: {
                position: "inside",
                interval: 20,
                style: {
                fill: "#1E395B",
                stroke: "none"
                }
            },
            tickMinor: {
                position: "inside",
                visible: true,
                interval: 4,
                style: {
                fill: "#1E395B",
                stroke: "none"
                }
            },
            pointer: {
                shape: "rect",
                length: 0.5,
                style: {
                fill: "#1E395B",
                stroke: "#1E395B"
                }
            },
            face: {
                style: {
                fill: "270-#FFFFFF-#D9E3F0",
                stroke: "#7BA0CC",
                "stroke-width": "4"
                }
            }
        });
        $("#orientation").change(function () {
            var orientation = $(this).val();
            $("#gauge").wijlineargauge("option", "orientation", orientation);
        });
    });
</script>

At run time you can use the drop-down box to choose the orientation of the gauge.

What You've Accomplished

Press F5 to run the application, and notice that the gauge appears horizontally orientated (default). Choose "vertical" from the drop-down box to change the orientation of the gauge to vertical.