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:
<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gauge" TagPrefix="Gauge" %>
<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.
<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.