Set Position at Run Time

You can easily set the wijradialgauge widget's position at run time. See the radialgauge > Position sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/radialgauge/Position for an example.

Complete the following steps to set the position:

Create a new C1 ASP.NET MVC 4 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="options">
    <p>pointer</p>
    Length:<input id="p_length" type="text" />
    Offset:<input id="p_offset" type="text" />
    <p>label</p>
    Offset:<input id="l_offset" type="text" />
    <p>tick</p>
    Offset:<input id="t_offset" type="text" />
    Position:<select id="t_position"><option value="inside">Inside</option>
        <option value="outside">Outside</option>
    </select>
    <p>range1</p>
    start Distance<input id="rs_distance" type="text" />
    end Distance<input id="re_distance" type="text" />
    <br />
    <input id="applyOption" type="button" value="Apply" />
</div>

This markup will add content for a radial gauge widget several text boxes that will let you set the position at run time. 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 wijradialgauge widget:

<script type="text/javascript">
    $(document).ready(function () {
    $("#gauge").wijradialgauge({
        value: 100,
        max: 150,
        min: 0,
        startAngle: -45,
        sweepAngle: 270,
        radius: 170,
        islogarithmic: false,
        origin: {
        x: 0.5, y: 0.5
        },
        labels: {
        offset: -30, //4F6B82
        style: {
            fill: "#556A7C",
            stroke: "#556A7C"
        }
        },
        tickMinor: {
        position: "inside",
        style: {
            fill: "#556A7C",
            stroke: "#556A7C"
        },
        interval: 2,
        visible: true,
        offset: 0
        },
        tickMajor: {
        position: "center",
        style: {
            fill: "#556A7C",
            stroke: "#556A7C"
        },
        interval: 10,
        visible: true
        },
        ranges: [{
        startWidth: 15,
        endWidth: 20,
        startValue: 20,
        endValue: 50,
        startDistance: 1,
        endDistance: 1,
        style: {
            fill: "#BC8A8E",
            stroke: "#BC8A8E"
        }
        }
        ],
        face: {
        style: {
            fill: "#E0E8EF",
            stroke: "#E0E8EF"
        }
        },
        pointer: {
        length: 1,
        style: {
            fill: "#BF551C",
            stroke: "#BF551C"
        }
        },
        cap: {
        style: {
            fill: "#7F9CAD",
            stroke: "#7F9CAD"
        }
        }
    });
    $("#applyOption").click(function () {
        var option = {}, pointer = {}, label = {}, tick = {}, range1 = {};
        pointer.length = getInputNum("p_length");
        pointer.offset = getInputNum("p_offset");
        label.offset = getInputNum("l_offset");
        tick.offset = getInputNum("t_offset");
        tick.position = $("#t_position").val();
        range1 = $("#gauge").wijradialgauge("option", "ranges")[0];
        range1.startDistance = getInputNum("rs_distance");
        range1.endDistance = getInputNum("re_distance");
        option.pointer = pointer;
        option.labels = label;
        option.tickMinor = tick;
        option.tickMajor = tick;
        option.ranges = [];
        option.ranges[0] = range1;
        $("#gauge").wijradialgauge("option", option);
    });
    var getInputNum = function (id) {
        var val = $("#" + id).val();
        return val ? parseInt(val) : undefined;
    }
    });
</script>

At run time you can set the gauge's position.

What You've Accomplished

Press F5 to run the application, enter values in each of the text boxes, and click the Apply button. The position of the gauge will change to the values you specified.