ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / Gauge Extenders / C1Linear Gauge Extender / Adding a Logarithmic LinearGauge
In This Topic
    Adding a Logarithmic LinearGauge
    In This Topic

    The C1LinearGaugeExtender control supports logarithmic gauges. This example will show how you can control the ticks' nonuniform use using the Islogarithmic and LogarithmicBase properties. You'll add a gauge and a check box that will allow you to select at run time if the gauge should be displayed as logarithmic or not.

    Complete the following steps:

    1. Create a new ASP.NET Web application.
    1. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
    2. Switch to Source view, and add the following markup at the top of the page to register the assembly:

    <%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gauge" TagPrefix="Gauge" %>

    1. Note that you may need to edit the above depending on the assembly you are using.
    2. Add the following markup within the main <div> tag to add a Panel with content and set the linear gauge extender:

    <asp:Panel ID="linearGauge" runat="server"></asp:Panel>

    <Gauge:C1LinearGaugeExtender runat="server" ID="LinearGaugeExtender1" Height="80" Width="400" TargetControlID="linearGauge" Value="50" Islogarithmic="true">

        <Labels>

            <LabelStyle FontSize="12pt" FontWeight="800">

                <Fill Color="#1E395B"></Fill>

            </LabelStyle>

        </Labels>

        <Pointer Shape="Rect" Length="0.5">

            <PointerStyle Stroke="#1E395B">

                <Fill Color="#1E395B"></Fill>

            </PointerStyle>

        </Pointer>

        <TickMajor Position="Inside" Factor="2" Interval="20">

            <TickStyle StrokeWidth="0">

                <Fill Color="#1E395B"></Fill>

            </TickStyle>

        </TickMajor>

        <TickMinor Visible="true" Interval="4" Position="Inside">

            <TickStyle StrokeWidth="0">

                <Fill Color="#1E395B"></Fill>

            </TickStyle>

        </TickMinor>

        <Animation Duration="2000" Easing="EaseOutBack"></Animation>

        <Face>

            <FaceStyle Stroke="#7BA0CC" StrokeWidth="4">

                <Fill ColorBegin="White" ColorEnd="#D9E3F0" LinearGradientAngle="270" Type="LinearGradient"></Fill>

            </FaceStyle>

        </Face>

    </Gauge:C1LinearGaugeExtender>

    This will add a styled gauge to the page.

    1. Add the following markup just below the gauge markup to add a check box and initialize it:

    <input type="checkbox" id="checkbox1" checked="checked" />

    <label for="checkbox1">IsLogarithmic</label>

    <script type="text/javascript">

        $(document).ready(function () {

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

                $("#<%= linearGauge.ClientID %>").wijlineargauge("option", "islogarithmic", $(this).is(":checked"));

            });

        });    

    </script>

    What You've Accomplished

    Press F5 to run your application,  notice that the gauge displayed has a logarithmic scale. Deselect the check box to return the gauge to its default view.