ComponentOne Sparkline for WPF
Sparkline for WPF Overview / Features / Axes / Date Axis
In This Topic
    Date Axis
    In This Topic

    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.

    1. Add the following code to the SampleData.cs class that you created in the Quick Start.
      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;
          }
      }
      
    2. 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.
      '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;