Set Margins at Run Time

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

Complete the following steps to set the margin:

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>
    <p>
        <label>MarginLeft:</label>
        <input type="text" id="txLeft" value="0" />
    </p>
    <p>
        <label>MarginRight:</label>
        <input type="text" id="txRight" value="0" />
    </p>
    <p>
        <label>MarginTop:</label>
        <input type="text" id="txTop" value="0" />
    </p>
    <p>
        <label>MarginBottom:</label>
        <input type="text" id="txBottom" value="0" />
    </p>
    <p>
        <input type="button" id="btnExec" value="Apply" />
    </p>
</div>

This markup will add content for a radial gauge widget four text boxes. 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,
            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
            },
            face: {
                style: {
                fill: "#E0E8EF",
                    stroke: "#E0E8EF"
                }
            },
            pointer: {
                length: 1,
                style: {
                fill: "#BF551C",
                    stroke: "#BF551C"
                }
            },
            cap: {
                style: {
                fill: "#7F9CAD",
                    stroke: "#7F9CAD"
                }
            }
        });
        $("#btnExec").click(function () {
            $("#gauge").wijradialgauge("option", "marginLeft", parseInt($("#txLeft").val()));
            $("#gauge").wijradialgauge("option", "marginRight", parseInt($("#txRight").val()));
            $("#gauge").wijradialgauge("option", "marginTop", parseInt($("#txTop").val()));
            $("#gauge").wijradialgauge("option", "marginBottom", parseInt($("#txBottom").val()));
        })
    });
</script>

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

What You've Accomplished

Press F5 to run the application, enter values in each of the text boxes (for example, 50), and click the Apply button. The margins of the gauge will change to the values you specified.