How to Add and Render Trendlines in Your C# .NET Charts

Trendlines are a critical charting technique used for data analysis. They visualize trends in the underlying data, such as the rate of change for a sales price over time. Trendlines are especially helpful when the data does not clearly indicate growth or decline to the naked eye.

Trendlines are typically used in Cartesian charts such as bar charts, line charts, and scatter point graphs. Most importantly, trendlines are almost always auto-calculated by a tool such as Microsoft Excel or a charting API.

The ComponentOne .NET FlexChart control supports built-in trendlines that are as easy to use as simply adding an empty data series to the chart. In this blog, we will look at the different types of trend lines and the C# trendline code needed to add them to your .NET applications. We will explore:

• Types of C# .NET Chart Trendlines
• How to Add Trendlines to FlexChart Using C#
• How to Change the Trendline Type
• How to Display an Average Line in the Chart
• How to Create a Moving Average Trendline

Ready to try it out? Download ComponentOne Today!

Types of C# .NET Chart Trendlines

There are several types of trendlines supported, including regression and non-regression. Non-regression trend lines include average, minimum, maximum, and moving average (the average over a specified time). Regression trend lines approximate data using functions. The full list of these is explained below:

• Linear - A linear trendline is a best-fit straight line. Your data is linear if the data point pattern resembles a line, and a linear trendline is a good fit if the R-squared value is at or near one.
• Polynomial - Polynomial trendlines are curved lines that are used with fluctuating data. They are helpful in analyzing gains or losses over a large data set.
• Power – A Power trend line is a curved line best used with data sets comparing measurements that increase at a specific rate — for example, the acceleration of a race car at one-second intervals.
• Exponential – An Exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates.
• Logarithmic – This is a best-fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out.
• Fourier - Fourier trend lines identify patterns or cycles in a series data set. They remove the effects of trends or other complicating factors from the data set, thereby providing a close estimate of the direction the data under analysis will take in the future.

How to Add Trendlines to FlexChart Using C#

You work with trendlines in FlexChart just as you do a series. You can add any number series to a chart by instantiating the series and adding it to the chart's Series collection. Trendlines work the same way and feature unique settings. You bind trendlines to your data collection in the same way as a data series.

The following C# trendline code demonstrates this relation by creating a data series bound to the same data source.

flexChart1.DataSource = DataService.GetUnitCostData();
flexChart1.ChartType = ChartType.LineSymbols;
flexChart1.BindingX = "Units";
var closePrice = new C1.Win.Chart.Series
{
    Binding = "Cost",
    Name="Cost",
};
var _trendLine = new C1.Win.Chart.TrendLine()
{
    Name="Trend Line",
    Binding = "Cost",
    FitType = FitType.Linear,
};
flexChart1.Series.Add(closePrice);
flexChart1.Series.Add(_trendLine);

You can see in the code above that adding a trendline is very similar to adding a second data series. FlexChart will automatically calculate and plot the trendline based on the data values.

How to Change the Trendline Type

The type of trendline rendered is based on the FitType property. Polynomial and Fourier trendlines also use the Order property. The order value determines how many hills and valleys to produce in the curve. Note that a polynomial trendline with an order value of two has only one hill or valley, and an order three polynomial trendline has two hills or valleys, and so on.

The following C# trendline code adjusts the previous code to produce a Polynomial trendline.

var _trendLine = new C1.Win.Chart.TrendLine()
{
    Name="Trend Line",
    Binding = "Cost",
    Order = 2,
    FitType = FitType.Polynomial,
};

How to Display an Average Line in the Chart

While you may not think of them as trendlines, non-regression trendlines, like Min, Max, and Average, are useful features of FlexChart. For example, you can display a horizontal line that shows the average value of the data set with a trendline.

The C# trendline code below shows how to modify the trendline to display an average of the data source along the Y axis. Just set the FitType to AverageY.

var _trendLine = new C1.Win.Chart.TrendLine()
{
    Name="Trend Line",
    Binding = "Cost",
    FitType = FitType.AverageY,
};

This code produces a horizontal line drawn across the Y axis at the average “Cost” value. You and your data model do not need to make these calculations, as the FlexChart library can do it all for you.

How to Create a Moving Average Trendline

A moving average trendline uses a specific number of data points set by the Period property, averages them, and uses the average value as a point in the trendline. For example, if ‘Period’ is set to two, then the average of the first two data points is used as the first point in the moving average trendline. The average of the second and third data points is used as the second point in the trendline, and so on. So, if our data set has a total of 100 points and we set the Period to 10, our moving average trendline will calculate the average value for each 10 points and plot.

The Moving Average trendline is a feature of ComponentOne FinancialChart, an extension of FlexChart with added financial chart types and indicators, but you can use it for even basic (not stock-related) charts.

To set up a moving average trendline in FlexChart, we instantiate a MovingAverage object, set the Period property, and set the remaining properties as we do for trendlines and data series.

var ma = new C1.Win.Chart.Finance.MovingAverage(){ Period = 10, Binding="close"};
financialChart1.Series.Add(ma);

The close set has values for each day, so a Period value of 10 would mean each 10-day period is averaged. This will produce a trendline that fits much closer.

Conclusion

Trendlines are much more fun when you don't have to do a lot of work to generate them on your charts. FlexChart offers about ten different types of built-in trendlines. All that’s required is adding them to your charts and customizing their appearance!

Ready to try it yourself? Download ComponentOne Today!

To learn more, check out the FlexChartExplorer sample.