HtmlChart - Logarithmic Axis

Demo Configurator

  • Axis type:Log
    Step (log base):10
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

A logarithmic axis is a special numeric axis that transforms the actual values by using a logarithmic function with a particular base. A logarithmic axis is useful for displaying values that cover different orders of magnitude because it lets large values display together with small values in a more condensed scale than the default linear axis. The feature is available since Q3 2014.

You can configure a logarithmic axis in RadHtmlChart by setting the Type property of the Axis to "Log". You can also control the base of the logarithm via the Step property (default value is 10).

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.Functionality.LogarithmicAxis.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="500px">
            <PlotArea>
                <XAxis Type="Log">
                    <TitleAppearance Text="Frequency (Hz)"></TitleAppearance>
                </XAxis>
                <Series>
                    <telerik:ScatterLineSeries DataFieldY="SoundPressureLevel" DataFieldX="Frequency" Name="20 phon">
                        <LineAppearance LineStyle="Smooth" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <MarkersAppearance Size="4" />
                    </telerik:ScatterLineSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Sound Pressure Level (dB)"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Equal-Loudness Contour">
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>


    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListXAxisType" AutoPostBack="true"
                                Label="Axis type:" Size="Medium">
                            </qsf:DropDownList>

                            <qsf:DropDownList runat="server" ID="DropDownListAxisStep" AutoPostBack="true"
                                Label="Step (log base):" Size="Medium">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?