Time-Series Charts

Time-series charts display time along the X-axis. This is a very common type of chart, used to show how values change as time passes.

Most time-series charts show constant time intervals (yearly, monthly, weekly, daily). In this case, the time-series chart is essentially identical to a simple value type chart like the one described in the Simple Charts topic. Instead of showing categories along the X axis, the chart will show dates or times. (If the time intervals are not constant, then the chart becomes an XY chart, described in the XY Charts topic.)

We will now walk through the creation of some time-series charts. These charts use the generic data from the Simple Charts topic.

Step 1) Choose the chart type:

The code clears any existing series, then sets the chart type:

C#	Copy Code
private void Page_Loaded_1(object sender, RoutedEventArgs e) { // Clear current chart c1Chart1.Reset(true); // Set chart type c1Chart1.ChartType = ChartType.Column; }

Step 2) Set up the axes:

We will start by obtaining references to both axes, as in the previous sample. Recall that the Bar chart type uses reversed axes (values are displayed on the horizontal axis, which is the Y-axis in a Bar chart):

C#	Copy Code
//Get axes Axis valueAxis = c1Chart1.View.AxisY; Axis labelAxis = c1Chart1.View.AxisX; if (c1Chart1.ChartType == ChartType.Bar) { valueAxis = c1Chart1.View.AxisX; labelAxis = c1Chart1.View.AxisY; }

Next we will assign titles to the axes. We will also set up the annotation format, minimum value, and major unit. We will use a larger interval for the tick marks between values in this chart:

C#	Copy Code
// configure label axis labelAxis.Title = "Date"; // configure value axis valueAxis.Title ="Amount ($1000)"; valueAxis.AnnoFormat = "#,##0 "; valueAxis.MajorUnit = 1000; valueAxis.AutoMin = false; valueAxis.Min = 0;

Copy Code

// configure label axis
labelAxis.Title = "Date";
// configure value axis
valueAxis.Title ="Amount ($1000)";
valueAxis.AnnoFormat = "#,##0 ";
valueAxis.MajorUnit = 1000;
valueAxis.AutoMin = false;
valueAxis.Min = 0;

Step 3) Add one or more data series

This time, we will use the second data-provider method defined earlier:

C#	Copy Code
// get the data var data = GetSalesPerMonthData();

Next, we want to display the dates along the label axis. To do this, we will use a Linq statement that retrieves the distinct Date values in our data records. The result is then converted to an array and assigned to the Data.ItemsSource property of the label axis.

C#	Copy Code
c1Chart1.Data.ItemNames = (from r in data select r.Date.ToString("MMM-yy")).Distinct().ToArray();

Note that we used the Distinct Linq operator to remove duplicate date values. That is necessary because our data contains one record per product for each date.

Now we are ready to create the actual DataSeries objects that will be added to the chart. Each series will show the revenue for a given product. This can be done with a Linq statement that is slightly more elaborate than what we used before, but provides a good practical example of the power provided by Linq:

C#	Copy Code
// add one series (revenue) per product var products = (from p in data select p.Product).Distinct(); foreach (string product in products) { var ds = new DataSeries(); ds.ValuesSource = ( from r in data where r.Product == product select r.Revenue).ToArray(); c1Chart1.Data.Children.Add(ds); }

Copy Code

// add one series (revenue) per product
  var products = (from p in data select p.Product).Distinct();
  foreach (string product in products)
  {
    var ds = new DataSeries();
    ds.ValuesSource = (
      from r in data
        where r.Product == product
        select r.Revenue).ToArray();
       c1Chart1.Data.Children.Add(ds);
  }

The code starts by building a list of products in the data source. Next, it creates one DataSeries for each product. The label of the data series is simply the product name. The actual data is obtained by filtering the records that belong to the current product and retrieving their Revenue property. The result is assigned to the ValuesSource property of the data series as before.

Step 4) Adjust the chart’s appearance

Once again, we will finish by setting the C1Chart.Palette property to quickly configure the chart appearance:

C#	Copy Code
c1Chart1.Palette = Palette.Module;

This concludes the code that generates our time-series charts. You can test it by running it and changing the C1Chart.ChartType property to Bar, Column, AreaStacked, or Pie to create charts of different types.

TaskBased Help

Showing Data Labels on the First of Each Month