Getting Started with Trendlines for ComponentOne ASP.NET Wijmo Charts

Trendlines are an important tool to express trends in data visualization controls like charts. Showing trends for yearly sales or profit is a common business requirement. With 2014 v2 release ComponentOne ASP.NET Wijmo, Charts now support this important feature. Let's get started using this feature with a simple case where we show the total value of orders placed in a specified period of time. We shall plot a trendline showing the trend for this period. Before we start an important point to note about Trendline support for Wijmo charts is that trendlines are just another series, we just set the "IsTrendline" property of the series to make it a trendline, we shall see this below. Coming back to our example, lets drop a C1BarChart and a SQLDataSource on the page. 1. Configure the SQLDataSource to point to the Northwind database with the following select query.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:C1NWindConnectionString2 %>"  
    SelectCommand="SELECT MONTH(o.OrderDate) AS OrderMonth, SUM(od.UnitPrice * od.Quantity) AS Total  
FROM (Orders AS o  
INNER JOIN [Order Details] AS od ON  
o.OrderID = od.OrderID)  
INNER JOIN Products AS p ON  
p.ProductID = od.ProductID  
WHERE (p.CategoryID = 1) AND (YEAR(o.OrderDate) = 1994)  
GROUP BY MONTH(o.OrderDate)  
ORDER BY OrderMonth;">  
</asp:SqlDataSource>

We will do the binding and chart configuration in C# code for easy understanding. 2. In the page load, create a chart binding for the barchart with "OrderMonth" as "XField" and "Total" as "YField"

//Create databinding for chart  
    C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding binding = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding();  
    binding.XField = "OrderMonth";  
    binding.YField = "Total";

3. As explained above we will create another chart binding which is a TrendLine.

//create  databinding for chart which is of type trendline.  
    C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding trend = new C1.Web.Wijmo.Controls.C1Chart.C1ChartBinding();  
    trend.XField = "OrderMonth";  
    trend.YField = "Total";  
    trend.IsTrendline = true;

4. Now we simply add the chart bindings and then databind the chart.

 //Bind the chart  
    this.C1BarChart1.DataBindings.Add(binding);  
    this.C1BarChart1.DataBindings.Add(trend);  
    this.C1BarChart1.Horizontal = false;  
    this.C1BarChart1.DataSourceID = this.SqlDataSource1.ID;

The property "TrendlineFitType" for trendline is by default set to "Ploynom". Run the sample and you should see the trendline drawn. There are different types of trendlines supported with ComponentOne ASP.NET charts, you can see different types of trendlines supported by the chart in this sample. You can see this in a MVC application here. Thanks for reading.