New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Date Axis

  • Demo Configurator
Date settings
  • Min Date Value:
  • Max Date Value:
Axis settings
  • X Axis Base Unit:
    Auto
  • X Axis Labels Date Format String:
    Default format string
Series settings
  • Series Labels Date Format:
    Default format string
  • Series ToolTips Date Format:
    Default format string

Date Format Strings are supported by the ASP.NET AJAX control for the Axis Labels, Series Labels and Series ToolTips:

  • Series Labels and Series Tooltips could be configured with ClientTemplate property by using the kendo.format function like this:

    <LabelsAppearance>
         <ClientTemplate>
             #= value # units ordered on #= kendo.format(\'{0:d}\', category) #
         </ClientTemplate>
    </ LabelsAppearance>

  • Axis Labels - only the desired date pattern must be set in the DateFormatString property (placeholders are not acceptable):

    <LabelsAppearance DataFormatString="y"></LabelsAppearance>

List of Standard Date Format Patterns with descriptions:

  • d - short date pattern
  • D - long date pattern
  • F - full date/time pattern
  • g - general date/time pattern (short time)
  • G - general date/time pattern (long time)
  • m|M - month/day pattern
  • u - universal sortable date/time pattern
  • y|Y - month/year pattern

The BaseUnit property of X axis can be configured with one of the following elements from the DateTimeBaseUnit enumeration and this will aggregate the displayed data accordingly:

  • Auto
  • Seconds
  • Minutes
  • Hours
  • Days
  • Weeks
  • Months
  • Years

The most suitable BaseUnit is dependent on the chart data and the proper options in this demo are Years, Months and Days.

MinDateValue and MaxDateValue properties of X axis are available since Q1 2014 and they control the start and the end points of the date range that is displayed.

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

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

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js">
    </script>
</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"
            Skin="Silk" DataSourceID="ObjectDataSource1">
            <PlotArea>
                <Series>
                    <telerik:LineSeries DataFieldY="SummedQuantity">
                        <LabelsAppearance>
                            <ClientTemplate>#= value # units ordered on #= kendo.format(\'{0:d}\', category) #</ClientTemplate>
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White">
                            <ClientTemplate>#= value # units ordered on <br />#= kendo.format(\'{0:d}\', category) #</ClientTemplate>
                        </TooltipsAppearance>
                    </telerik:LineSeries>
                </Series>
                <XAxis DataLabelsField="OrderDate" Type="Date">
                    <TitleAppearance Text="Order Date"></TitleAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </XAxis>
                <YAxis Step="100">
                    <TitleAppearance Text="Quantity"></TitleAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Ordered Quantity per Date"></ChartTitle>
        </telerik:RadHtmlChart>
    </div>

    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="OrderedQuantityPerDay"
        SelectMethod="GetQuantityAndOrderDate">
        <SelectParameters>
            <asp:Parameter Name="numSeriesItems" DefaultValue="15" />
            <asp:Parameter Name="fromDate" DefaultValue="1996-12-31" />
            <asp:Parameter Name="toDate" DefaultValue="1997-1-7" />
        </SelectParameters>
    </asp:ObjectDataSource>

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

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

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Date settings">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Min Date Value:</span>
                            <qsf:DatePicker ID="DatePickerMinDateValue" runat="server" MinDate="1996-12-31" MaxDate="1997-1-7"
                                SelectedDate="1996-12-31" ToolTip="Enter date between 1996/12/31 and 1997/1/7" AutoPostBack="true">
                                <Calendar ID="Calendar1" RangeMinDate="1996-12-31" RangeMaxDate="1997-1-7" runat="server">
                                </Calendar>
                                <DateInput ID="DateInput1" runat="server">
                                    <ClientEvents OnError="OnError" OnKeyPress="OnKeyPress" />
                                </DateInput>
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <span class="label">Max Date Value:</span>
                            <qsf:DatePicker ID="DatePickerMaxDateValue" runat="server" MinDate="1996-12-31" MaxDate="1997-1-7"
                                SelectedDate="1997-1-7" ToolTip="Enter date between 1996/12/31 and 1997/1/7"  AutoPostBack="true">
                                <Calendar ID="CalendarMaxDateValue" RangeMinDate="1996-12-31" RangeMaxDate="1997-1-7" runat="server">
                                </Calendar>
                                <DateInput ID="DateInputMaxDateValue" runat="server">
                                    <ClientEvents OnError="OnError" OnKeyPress="OnKeyPress" />
                                </DateInput>
                            </qsf:DatePicker>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Axis settings">
                    <ul class="fb-group">
                        <li>
                            <span class="label">X Axis Base Unit:</span>
                            <qsf:DropDownList ID="DropDownListXAxisBaseUnit" runat="server" AutoPostBack="true"></qsf:DropDownList>
                        </li>
                        <li>
                            <span class="label">X Axis Labels Date Format String:</span>
                            <qsf:DropDownList ID="DropDownListXAxisDateFormatStrings" runat="server" AutoPostBack="true"></qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium" Title="Series settings">
                    <ul class="fb-group">

                        <li>
                            <span class="label">Series Labels Date Format:</span>
                            <qsf:DropDownList ID="listSeriesLabelsClientTemplates" runat="server" AutoPostBack="true"></qsf:DropDownList>
                        </li>
                        <li>
                            <span class="label">Series ToolTips Date Format:</span>
                            <qsf:DropDownList ID="listSeriesToolTipsClientTemplates" runat="server" AutoPostBack="true"></qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance