Exploring Chart Data Series Options with FlexChart

April 13 2016

Earlier we introduced our new chart control, FlexChart for WinForms, and showcased how easy it is to perform basic tasks with the chart. In this blog, we'll go a step further and explore an important chart element: Series and the flexibility it offers.

>> Try C1Studio Now

Series represents the plotted data points: the very core of your chart. Given this, it's important that you have complete control over all the related aspects of data points. Here's a look at all the ways you can manage your data series in FlexChart

Plot from Multiple Data Sources

If your data is in different data sources, but need to be visualized in the same chart, FlexChart allows you to combine the data with the Series.DataSource property. This supports multiple sources, including Access, SQL Server, and objects. Consider the following scenario where we have two tables, one for customer and one for order details: Customer Details:

Name

Country

501

Larry Jammers

France

502

Dan Paulson

Germany

503

Ben Cole

USA

504

Noah Griswold

China

505

Oprah Cole

Australia

Order Details:

OrderId

OrderDate

Amount

CustomerId

1001

12/2/2013

4500

502

1002

15/4/2014

1800

505

1003

28/7/2015

3560

501

1004

31/3/2015

2580

504

Let's view number of customers and total orders for each country.

Step 1: Transform data from the tables into collections that the chart can use.

_customerCountByCountry = from c in customers  
group c by c.Country into g  
orderby g.Key  
select new  
{  
Country = g.Key,  
Count = g.Count()  
};  

_orderTotal2013 = from c in customers  
join o in orders on c.Id equals o.CustomerId  
where o.OrderDate.Year == 2013  
group o by c.Country into g  
select new  
{  
Country = g.Key,  
OrderTotal = g.Sum(order => order.Amount)  
};

Step 2: Set the DataSource property of each series to the respective collections

//Using different sources for each series  
customerCountSeries.DataSource = _customerCountByCountry;  
orderTotal2013Series.DataSource = _orderTotal2013;  
. . .  
orderTotal2014Series.DataSource = _orderTotal2014;  
orderTotal2015Series.DataSource = _orderTotal2015;

Multiple Data Sources Thus, by combining multiple series, with their own data sources, we have provided a powerful visualization for comparison.

Plot Multiple Chart Types in a Single Chart

An important aspect of chart design is visual differentiation: the end user needs to distinguish between the different kinds of data that are being plotted. Distinguishable chart types can easily differentiate different types of data being plotted. Every series in FlexChart has a property "ChartType" to facilitate this, allowing us to create charts with mixed chart types. For instance, you can combine Column charts with Line charts. Carrying on with our previous example, we can change the ChartType of the "Customer Count" series to LineSymbols with the following line of code:

customerCountSeries.ChartType = C1.Chart.ChartType.LineSymbols;

Plot multiple chart types With different types of chart series, we can very easily distinguish the data the series is representing.

Plot Multiple Axes

Sometimes it's not sufficient for chart types alone to distinguish the data we're depicting. At times, the plotted data may have different units or scale, and displaying them on a single axis doesn't work. FlexChart allows you to create multiple axes that can be bound with the series so as to provide a robust scale and relatable units. In the previous example, we can see that the CustomerCount series is very small in scale as compared to OrderTotal. So, to depict CustomerCount clearly, we should create a different scale:

//Secondary Axis to Display the Customer Count  
Axis axisY2 = new Axis();  
axisY2.Position = C1.Chart.Position.Right;  
axisY2.Title = "No of Customers";  
axisY2.Min = 0;  
//Make the customer count series use the Secondary Axis  
customerCountSeries.AxisY = axisY2;

Plot multiple axes in one chart

Style your Chart Data Series

Charts are all about visual appeal. Along with the 16 pre-defined color palettes, FlexChart provides complete control over the customization of series styles to make the charts look more appealing. In FlexChart, the appearance of each series can be customized using the various styling properties available at the Series level. Customization options include:

//Customize the Series Style's  
customerCountSeries.Style.StrokeWidth = 3;  
customerCountSeries.Style.StrokeColor = customerCountSeries.SymbolStyle.FillColor = ColorTranslator.FromHtml("#7E6B8F");  
customerCountSeries.SymbolMarker = C1.Chart.SymbolMarker.Box;  
orderTotal2013Series.Style.FillColor = ColorTranslator.FromHtml("#96E6B3");  
orderTotal2014Series.Style.FillColor = ColorTranslator.FromHtml("#DA3E52");  
orderTotal2015Series.Style.FillColor = ColorTranslator.FromHtml("#A3D9FF");

Customize series style Go to FlexChart's Documentation

Download the sample: WPF | UWP | WinForms

MESCIUS inc.