Telerik UI for Windows Phone by Progress

Date Time Continuous Axis

The DateTime continuous axis is like a numerical axis but the axis value range consists of DateTime values which are always sorted chronologically. Here is an example XAML snippet that demonstrates how to create a date time continuous axis:

CopyXAML
<chart:RadCartesianChart x:Name="chart">

  <chart:RadCartesianChart.HorizontalAxis>
    <chart:DateTimeContinuousAxis LabelFitMode="MultiLine"
            LabelFormat="MMM yyyy"/>
  </chart:RadCartesianChart.HorizontalAxis>

  <chart:RadCartesianChart.VerticalAxis>
    <chart:LinearAxis/>
  </chart:RadCartesianChart.VerticalAxis>

  <chart:RadCartesianChart.Series>
    <chart:LineSeries Stroke="Orange"
          StrokeThickness="2"/>
</chart:RadCartesianChart>

Below is the binding logic:

CopyC#
public class MainPage
{
    public MainPage()
    {
        InitializeComponent();
        DateTime lastDate = DateTime.Now;
        double lastVal = 20;

        List<ChartDataObject> dataSouce = new List<ChartDataObject>();
        for (int i = 0; i < 5;
        ++i)
        {
            ChartDataObject obj = new ChartDataObject
            {
                Date =
                    lastDate.AddMonths(1),
                Value = lastVal++
            };
            dataSouce.Add(obj);
            lastDate = obj.Date;
        }
        LineSeries series = (LineSeries)this.chart.Series[0];
        series.CategoryBinding = new PropertyNameDataPointBinding()
        {
            PropertyName =
                "Date"
        };
        series.ValueBinding = new PropertyNameDataPointBinding()
        {
            PropertyName =
                "Value"
        };

        series.ItemsSource = dataSouce;
    }
}
CopyVB.NET
Public Sub New()
        InitializeComponent()

        Dim lastDate As DateTime = DateTime.Now
        Dim lastVal As Double = 20

        Dim dataSource As List(Of ChartDataObject) = New
        List(Of ChartDataObject)()
        For i As Integer = 0 To 5 Step 1
        Dim obj As ChartDataObject = New
            ChartDataObject()
            obj.Date = lastDate.AddMonths(1)
            obj.Value = lastVal

            lastVal += 1
            lastDate = obj.Date
        Next

        Dim series As LineSeries = DirectCast(Me.chart.Series(0), LineSeries)

        Dim categoryBinding As PropertyNameDataPointBinding = New PropertyNameDataPointBinding
        categoryBinding.PropertyName = "Date"

        Dim valueBinding As PropertyNameDataPointBinding = New PropertyNameDataPointBinding
        valueBinding.PropertyName = "Value"

        series.CategoryBinding = categoryBinding
        series.ValueBinding = valueBinding
        series.ItemsSource = dataSource
    End Sub

And finally the definition of the ChartDataObject class:

CopyC#
public class ChartDataObject
{
    public DateTime Date
    {
        get;
        set;
    }
    public double Value
    {
        get;
        set;
    }
}
CopyVB.NET
Class ChartDataObject
    Public Property DateValue As DateTime
    Public Property Value As Double
End Class

 

Date Time Categorical Axis

The DateTime categorical axis is a categorical axis with Date-Time values which are sorted chronologically and is represented by the DateTimeCategoricalAxis class. It also allows definition of categories based on specific date time components. For example if such an axis displays a range of one year, the data points can be plotted in categories for each month. If the range is one month, the values may be categorized by day and so on. Here is an example that uses the date time categorical axis:

CopyXAML
<chart:RadCartesianChart x:Name="chart">
  <chart:RadCartesianChart.HorizontalAxis>
    <chart:DateTimeCategoricalAxis LabelFitMode="MultiLine"
                                   LabelFormat="MMM yyyy"
                                   DateTimeComponent="Month"/>

  </chart:RadCartesianChart.HorizontalAxis>

  <chart:RadCartesianChart.VerticalAxis>
    <chart:LinearAxis/>
  </chart:RadCartesianChart.VerticalAxis>

  <chart:RadCartesianChart.Series>
    <chart:LineSeries Stroke="Orange"
                      StrokeThickness="2"/>
  </chart:RadCartesianChart.Series>
</chart:RadCartesianChart>

 

radchart-axes-datetime