Using Built-in and Custom-logic Trendlines in the XamDataChart

Trendlines are an important feature in every charting component. The XamDataChart, the fast chart component capable of real-time data feeds in both WPF and Silverlight platforms, supports a number of built-in trendline types – Linear, Quadratic, Cubic, Quadric, Quintic, Exponential, Logarithmic, among others. Try as we might, we cannot implement every type of trendline possible in the XamDataChart. And all too often, you wouldn’t want us to – many of you have proprietary algorithms you use for building your trendlines. So, how can you setup built-in and custom-logic trendlines in the XamDataChart?

For simple trendline types, all you need to do is select the trendline type. For custom-logic trendlines, you have to add an additional series to contain your own trendline, whose values are computed according to your custom logic. This blogpost includes a sample project which illustrates this approach. It is built in the form of a Silverlight 4 application, using Visual Studio 2010 and uses the NetAdvantage for Silverlight Data Visualization XamDataChart component. You need to download a trial version of the product from this page to run this demo.

Using a built-in trendline in the XamDataChart

Once you setup the chart with a series, all you have to do to add a trendline is set the series TrendLineType property to one of the supported trendline types, as shown in the segment below:

<ig:ScatterLineSeries x:Name="line" Title="Original Series"
                XAxis="{Binding ElementName=xAxis}"
                YAxis="{Binding ElementName=yAxis}"
                Legend="{Binding ElementName=legend}"
                XMemberPath="XValue"
                YMemberPath="Value"
                TrendLineType="QuinticFit"
                TrendLineBrush="Orange"
                TrendLineThickness="2"
                MarkerType="Circle"
                ItemsSource="{StaticResource vm}"/>

This produces the thin orange line that runs close to the original series, as shown in the screenshot above. There are a number of properties you can set to style the appearance of the Trendline – TrendLineBrush, TrendLineDashArray, TrendLineDashCap, TrendLinePeriod, TrendLineThickness, TrendLineZIndex.

Setting up a custom trendline

The custom trendline approach comes down to initializing a second series with a separate data source, whose values are computed based on the data which is displayed by the original data series. The values of the original series are used to compute the values of the custom trendline, when the SourceData member is set to the original series data, as shown below:

public class TrendedData : ObservableCollection<TestDataItem>
{
  private TestData _sourceData;
  public TestData SourceData
  {
    get { return _sourceData; }
    set
    {
        //initialize the source data member with the data of the original series
        _sourceData = value;
        //add collection items containing the trendline data items
        Populate();
    }
  }

  private void Populate()
  {
     //you can implement the custom fitting logic in this method using values in the _sourceData 
     (from item in _sourceData
        select new TestDataItem()
        {
            XValue = item.XValue,
            Value = item.Value + 1
        }).ToList().ForEach(Add);
  }
}

This logic is responsible for setting the values of the violet line in the screenshot above. It initializes each item of the trendline with a Y-value to equal to value in the original series plus one. This method is where you can implement your custom logic to compute the custom trendline values.

Summary

As we’ve seen in this blog post, it’s straightforward to setup both built-in and custom-logic trendlines in the XamDataChart. The simplicity of coding with the XamDataChart helps you save time coding and gives you the time you need to turn to your users, better understand their requirements and produce data visualizations that are both appealing and easily understood.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com