MVC5 Classic
Create a Logarithmic Gauge

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

Complete the following steps to set the pager type:

  1. Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic Project).
  2. Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
  3. 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 linear gauge widget and a check box to the page.

  4.  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({ value: 50,

            islogarithmic: true,

            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"

                }

            }

        });

        $("#checkbox1").change(function () {

            $("#gauge").wijlineargauge("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.

See Also

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback