.NET Charts: Modern Data Visualization and Faster Rendering with new FlexChart

FlexChart is a completely revamped and a newer C1Chart that empowers developers for their application's .NET charting needs.

  • FlexChart blends a rare flavor of usability, flexibility and great performance with a rich out-of-the-box feature set that will speed up your development with 40+ .NET chart types.
  • FlexChart is both more lightweight and faster than C1Chart, whether for small or large data.
  • In addition to the native rendering, FlexChart supports DirectX rendering for better performance.
  • The easy-to-use API means you'll be able to extend and customize the control with a small learning curve.

What's more, with availability on many platforms (WinForms, WPF, UWP, MVC, and LightSwitch, along with HTML5/Javascript and iOS, Android, and Xamarin), you'll increase your reach to varied customers. FlexChart's 2016 V2 release also includes the introduction of FinancialChart in beta. See roadmap.

FlexChart: What’s Different from C1Chart

With the 2016 v2 release of C1Studio, C1Chart takes a backseat, and all active development will be on our new FlexChart control for WinForms, WPF and UWP. In this post we'll walk through the new features and improvements to FlexChart, giving you a better experience over C1Chart.

Download C1Studio

Features include powerful, flexible data binding; dozens of chart types, series toggling; custom palettes; auxiliary axes; tooltip customization. In this post we'll cover:

Easy-to-use API

FlexChart’s object model is probably the biggest advantage that FlexChart has over its predecessor, C1Chart. The easy-to-use API makes it easier to plot basic to advanced charts in a small amount of time. The learning curve has been drastically reduced with the simplification of code that is required to be written for tooltip customization, Hit test, data labels, etc. Apart from being easy-to-use, FlexChart's API is also a lot cleaner compared to C1Chart. One need not follow huge property chains to set up chart or use different chart features. For example, to add a new series in C1Chart, the code looked like this:

var series = c1Chart.ChartGroups.Group0.ChartData.SeriesList.AddNewSeries();

The equivalent code in FlexChart is:

var series = new Series();  
flexChart.Series.Add(series);

You can check our C1ChartToFlexChart sample to view other such API changes.

Better Performance

One of the major USP of our C1Chart control has been its high performance. However, we at ComponentOne have always believed in the fact that "there's always room for improvement". Sticking with this belief we have highly improved FlexChart's performance over C1Chart. Optimized for size and speed, FlexChart is one of the fastest and most lightweight chart controls available in the market. Comparing WPF Chart Performance Comparing WPF Chart Performance

New Features

Rendering in GDI+, DirectX and Direct2D

FlexChart gives you the flexibility to choose between native or DirectX rendering. Depending upon the RenderMode that you choose, you'll get better and even better performance whether you're rendering a chart with small or large data.

  • WinForms Options: Default GDI+ and DirectX
  • UWP Options: Default DirectX mode and Direct2D mode
  • WPF Options: Default DirectX mode, and Direct2D mode

Range Selector

The new RangeSelector tool supports selecting a range of data to be displayed in chart. When you've plotted a lot of data on a chart, focusing on a certain range of data or a certain period of data for analyzing becomes easier with Range Selector control. You can also increase your chart's interactivity by adding this slider-like tool to FlexChart. Narrow down date ranges with Range Selector Narrow down date ranges with Range Selector

Built-in Selection Support

Selection support is built in to FlexChart, so you don't have to write extra code. By enabling the Selection Mode, you can allow users to select series or data points by clicking a particular data point or series containing the data point itself. SelectionStyle for the selected data points/series can be specified to differentiate them from other plot elements in the chart. Additionally, you can write code to display information related to the selected data point/series. Enable data point or series selection with a single property setting Enable data point or series selection with a single property setting

Legend Toggle

Allow users to toggle the visibility of the displayed series. When you have a number of series plotted on a chart, and users can focus on a single or few of them by simply tapping a legend item to hide or display the corresponding series in the plot area. Set a property to toggle a selected series Set a property to toggle a selected series

Axis Labels Auto Rotation

FlexChart can now smartly decide whether to render the labels horizontally or in a tilted manner, depending upon the space availability. This is a small feature, but it significantly reduces your coding efforts to render axis labels: you only need to specify the LabelAngle property of axis to Double.NaN.

Advanced .NET Charting Capabilities

Apart from the aforementioned new features, FlexChart presents significant improvements and additions to some of the existing C1Chart features. You're empowered to add advanced charting capabilities to your application by using FlexChart.

Multiple Data Source

Starting with FlexChart, we're doing away with the use of ChartDataArray to specify the data for a series. Using ChartDataArray was a multi-step tedious process which required transforming the actual data source collection to an array before it can be used with the series:

C1Chart code:

DataTable dt = //populate your table  
PointF[] arr = new PointF[dt.Rows.Count];  
for (int i = 0; i < dt.Rows.Count; i++)  
{  
arr[i] = new PointF{  
X = (float)dt.Rows[i].ItemArray[0],  
Y = (float)dt.Rows[i].ItemArray[1]  
};  
}  
c1Chart.ChartGroups[0].ChartData.SeriesList[0].PointData.CopyDataIn(arr);

With FlexChart, you no longer require these steps. You can directly specify your source data collection as the series’s data source by using the Series.DataSource property.

FlexChart code:

DataTable dt = //populate your table  
flexChart.Series[0].DataSource = dt;

FlexChart also allows you to combine data in different data sources and visualize them in the same chart. By combining multiple series, with their own data sources, you can have a powerful visualization for comparison.

Composite Charts

In C1Charts, you could display Composite Charts by specifying ChartType for each ChartGroup. However, with just two ChartGroups available, the scope was limited to displaying only two chart types.

C1Chart code:

c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.Bar;  
c1Chart1.ChartGroups[1].ChartType = Chart2DTypeEnum.XYPlot;

FlexChart resolves this restriction by introducing Series.ChartType property, letting you specify ChartType at the individual series level. And with no limitation on the number of series that you can have in FlexChart, you can create a Composite chart with as many different chart types as you need.

FlexChart code:

flexChart.Series[0].ChartType = ChartType.Column;  
flexChart.Series[1].ChartType = ChartType.Line;  
flexChart.Series[2].ChartType = ChartType.LineSymbols;

Build composite charts Build composite charts

Multiple Secondary Axes

With C1Chart, we could plot a maximum of three axes: primary axis X, Y and secondary axis Y2. This limited the needs of plotting data that required depiction on more than one secondary X or Y axis. FlexChart removes this restriction by allowing you to plot one or more data series on a secondary axis. You can have multiple axes by adding as many secondary X and Y axes to the chart as you need. In order to plot a series on the secondary axes, you can simply specify its AxisX and AxisY properties to a new Axis object. Support unlimited secondary axes Support unlimited secondary axes Read more about FlexChart Let us know your thoughts on FlexChart improvements in comments!

MESCIUS inc.

comments powered by Disqus