Create a Logarithmic Gauge

The wijradialgauge widget supports displaying values in a logarithmic scale. Simply set the isLogarithmic option to take advantage of this feature. See the radialgauge > Logarithmic sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/radialgauge/Logarithmic for an example.

Complete the following steps to set the pager type:

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="options">
    <input type="checkbox" id="checkbox1" checked="checked" />
    <label for="checkbox1">IsLogarithmic</label>
</div>

This markup will add content for a radial gauge widget and a check box to the page.

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: "auto",
        islogarithmic: true,
        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: 0.6,
            endDistance: 0.58,
            style: {
            fill: "#7BA0CC",
            stroke: "#7BA0CC",
            "stroke-width": "0"
            }
        },
        {
            startWidth: 5,
            endWidth: 20,
            startValue: 10,
            endValue: 125,
            startDistance: 0.58,
            endDistance: 0.54,
            style: {
            fill: "0-#B4D5F0-#B4D5F0",
            stroke: "#FFFFFF",
            "stroke-width": "0"
            }
        },
        {
            startWidth: 20,
            endWidth: 25,
            startValue: 125,
            endValue: 150,
            startDistance: 0.54,
            endDistance: 0.5,
            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"
            }
        }
        });
        $("#checkbox1").change(function () {
        $("#gauge").wijradialgauge("option", "islogarithmic", $(this).is(":checked"));
        });
    });    
</script>

If the check box is selected the gauge will display values in a logarithmic scale, if the check box is not selected values will be displayed in the default scale.

What You've Accomplished

Press F5 to run the application, and notice that if the check box is selected the gauge will display values in a logarithmic scale, if the check box is not selected values will be displayed in the default scale.