Date Axis

Sparkline supports a date axis to plot data over a span of dates on x-axis. The date axis is nothing but a type of x-axis that allows users to display data at irregular intervals. The date axis takes a collection of dates that acts as x-coordinates and plots data accordingly. This way users can plot data over a span of dates.

For example, consider a scenario where the user wants to display the following monthly sales profit figures as a trend. In the following tabulation, negative values indicate loss.

Dates	Sales Profit (in Hundred Thousands)
01-01-2016	1.0
15-01-2016	-2.0
01-02-2016	-1.0
03-03-2016	6.0
06-04-2016	4.0
11-06-2016	-4.0
19-07-2016	3.0
01-09-2016	8.0

The C1Sparkline class provides DisplayDateAxis property, which if set to true, displays data over a span of dates. Here is how the Sparkline control plots data at irregular intervals.

Date axis

Complete the steps given below to set the date axis an plot data at irregular intervals.

To configure date axis, you can supply an enumerable collection of dates as x-coordinates and assign it to the DateAxisData property. This example uses the sample that you created in the Quick Start section.

Add the following code to the SampleData.cs class that you created in the Quick Start.

Visual Basic
C#

Visual Basic

Public ReadOnly Property DefaultDateAxisData() As List(Of DateTime)
    Get
        Dim dates As New List(Of DateTime)()
        dates.Add(New DateTime(2016, 1, 1))
        dates.Add(New DateTime(2016, 1, 15))
        dates.Add(New DateTime(2016, 2, 1))
        dates.Add(New DateTime(2016, 3, 3))
        dates.Add(New DateTime(2016, 4, 6))
        dates.Add(New DateTime(2016, 6, 11))
        dates.Add(New DateTime(2016, 7, 19))
        dates.Add(New DateTime(2016, 9, 1))
        Return dates
    End Get
End Property

public List<DateTime> DefaultDateAxisData
{
    get
    {
        List<DateTime> dates = new List<DateTime>();
        dates.Add(new DateTime(2016, 1, 1));
        dates.Add(new DateTime(2016, 1, 15));
        dates.Add(new DateTime(2016, 2, 1));
        dates.Add(new DateTime(2016, 3, 3));
        dates.Add(new DateTime(2016, 4, 6));
        dates.Add(new DateTime(2016, 6, 11));
        dates.Add(new DateTime(2016, 7, 19));
        dates.Add(new DateTime(2016, 9, 1));
        return dates;
    }
}

Switch to the MainWindow.xaml.cs class, and edit the interaction logic to set sparkline type and assign the date collection to the DateAxisData property.

Visual Basic
C#

Visual Basic

'Display Date Axis
sparkline.Data = sampleData.DefaultData
sparkline.SparklineType = SparklineType.Column
sparkline.DateAxisData = sampleData.DefaultDateAxisData
sparkline.DisplayXAxis = True

//Display Date Axis
sparkline.Data = sampleData.DefaultData;
sparkline.SparklineType = SparklineType.Column;
sparkline.DateAxisData = sampleData.DefaultDateAxisData;
sparkline.DisplayXAxis = true;