The C1RadialGaugeExtender 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.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. 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" %>

Note that you may need to edit the above depending on the assembly you are using.

4. And add the following markup within the main <div> tag to add a Panel with content and set the linear gauge extender:

<asp:Panel ID="radialGauge" Height="475" Width="756" runat="server">

</asp:Panel>

<Gauge:C1RadialGaugeExtender runat="server" ID="RadialGaugeExtender1" TargetControlID="radialGauge" Value="100" StartAngle="-45" SweepAngle="270" Islogarithmic="true" Max="150">

    <Cap Radius="10">

        <PointerCapStyle Stroke="#1E395B">

            <Fill Color="#1E395B">

            </Fill>       

        </PointerCapStyle>

    </Cap>

    <TickMajor Factor="2" Visible="True" Interval="10" Offset="27" Position="Inside">

        <TickStyle Height="4" Stroke="#E7EFF8" StrokeWidth="1.5" Width="20">

            <Fill Color="#1E395B">

            </Fill>       

        </TickStyle>

    </TickMajor>

    <TickMinor Visible="True" Interval="5" Offset="30" Position="Inside">

        <TickStyle Height="3" Stroke="#E7EFF8" Width="10">

            <Fill Color="#1E395B">

            </Fill>

        </TickStyle>

    </TickMinor>

    <Pointer Length="0.8" Width="6" Offset="0" Shape="Rect">

    <PointerStyle Stroke="#1E395B">

            <Fill Color="#1E395B">

            </Fill>

    </PointerStyle>

    </Pointer>

    <Labels Offset="27">

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

                  <Fill Color="#1E395B">

                  </Fill>

            </LabelStyle>

    </Labels>

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

      <Face>

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

                  <Fill ColorBegin="White" ColorEnd="#D9E3F0" RadialGradientFocusPointX="0.9" RadialGradientFocusPointY="0.6" Type="RadialGradient">

                  </Fill>

        </FaceStyle>

      </Face>

      <Ranges>

            <Gauge:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5" StartDistance="0.6" StartValue="0" StartWidth="2">

                <RangeStyle Stroke="#7BA0CC" StrokeWidth="0">

                        <Fill Color="#7BA0CC">

                        </Fill>           

                </RangeStyle>

            </Gauge:GaugelRange>

            <Gauge:GaugelRange EndDistance="0.54" EndValue="125" EndWidth="20" StartDistance="0.58" StartValue="10" StartWidth="5">

                <RangeStyle Stroke="White" StrokeWidth="0">

                        <Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient">

                        </Fill>           

                </RangeStyle>

            </Gauge:GaugelRange>

            <Gauge:GaugelRange EndDistance="0.5" EndValue="150" EndWidth="25" StartDistance="0.54" StartValue="125" StartWidth="20">

                <RangeStyle Stroke="#7BA0CC" StrokeWidth="0">

                        <Fill Color="#7BA0CC">

                        </Fill>           

                </RangeStyle>

            </Gauge:GaugelRange>

      </Ranges>

</Gauge:C1RadialGaugeExtender>

This will add a styled gauge to the page.

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

<script type="text/javascript">

    $(document).ready(function () {

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

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

        });

    });

</script>

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

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

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.