Skip to main content Skip to footer

Handling Large Data Sets with C1DataGrid and C1Chart

Most Silverlight applications access data from web services. The problems we face is that sometimes the UI controls perform poorly when handling large amounts of data, whether you're using a listbox, datagrid, chart, etc, and it also becomes impractical to try and send really large amounts of data over the wire at once. So we have to look at how we can workaround these problems to optimize our application. There are several techniques we can use, some of which are provided for free from the controls:

  • UI Virtualization (i.e. recycling containers)
  • Data Virtualization (i.e. paging, lazy loading)
  • Binary Encoding/compression (i.e. reducing the size of the data)

UI Virtualization

Most data binding controls support UI virtualization in Silverlight and WPF out of the box, including C1DataGrid. A control that supports UI virtualization is smart enough to create only the UI containers needed to display the visible items. For example, let's say we are loading C1DataGrid with 100,000 rows, and we see only about 30 rows in our viewport. Without UI virtualization, the C1DataGrid would instantiate all 100,000 rows' containers and performance would dramatically suffer from this. With UI virtualization, C1DataGrid only creates the 30 row containers needed. Then there are two virtualization modes, standard and recycling. With standard mode the containers are created when they enter the visible area. With recycling mode, the control reuses containers that get scrolled out of view rather than creating new ones. C1DataGrid uses recycling mode and there is a benefit in using recycling mode when handling very large amounts of data.

Deferred Scrolling

Deferred scrolling is a performance enhancing feature that is supported natively in WPF but not in Silverlight 4. However, it is an added feature of ComponentOne DataGrid for Silverlight and you can turn it on by simply setting the ScrollMode to Deferred. With deferred scrolling the data is not fetched until the user stops moving the scroll bar thumb. This improves the applications performance because the C1DataGrid is not constantly creating and recycling the row containers as the user scrolls. The downside may be that the user can't see where they're going as they scroll, but we can compromise this by displaying a scroll preview, or scroll tip, which shows some relative data or row number.

<my:C1DataGrid Name="c1DataGrid1" ScrollMode="Deferred" ScrollPreviewRowTemplate="{StaticResource MyScrollPreviewRowTemplate}" />

Scroll Preview Template:

<Grid.ColumnDefinitions> </Grid.ColumnDefinitions> <Grid.RowDefinitions> </Grid.RowDefinitions>

Data Virtualization

The idea of data virtualization is to load data asynchronously on demand so we are not loading all data to the client or the control at once. A common example of data virtualization in Silverlight is paging. The C1DataGrid control is compatible with WCF Ria Services and paging through use of the special C1DataPager control and binding through a PagedCollectionView.

Stealth Paging

We can also implement a scrolling based solution using C1DataGrid we call "stealth paging." Stealth paging is essentially asychronous paging with a scrolling interface. The data layer needs to be configured to send ranges of data and we utilize the C1DataGrid's LoadedRowPresenter event to trigger calls on demand. *Samples for pager and stealth paging can be found in the Control Explorer sample, which installs with Studio for Silverlight.

Data Compression

ComponentOne Studio for Silverlight includes some powerful data compression services in C1Zip. Data compression is especially useful in Silverlight applications when transferring between client and server, and also when storing application data in isolated storage (which is limited to 1MB by default). You can use C1Zip to both compress the data on the server and then uncompress it on the client for faster downloads.

Binary Encoding

Binary message encoding does not compress data, but rather encodes text messages to a smaller format. This technique is only supported in WCF services. Read more about it in this msdn article.

C1Chart Optimization

The ComponentOne Chart control, C1Chart, can generate and display charts for massive amounts of data. But even when displaying a lot of data points sometimes the performance of the UI can suffer when we resize the page or attempt to scroll. We realized that there are many situations where you may want to plot an enormous amount of data points, but are willing to sacrifice some accuracy for better performance. So we implemented a simple optimization scheme which can reduce the number of repetitive data points being plotted to increase performance when handling large arrays of data. The key feature here is the SetOptimizationRadius method. This method controls rendering optimization for line and area charts. This optimization is ideal for charts where you are analyzing trends, and at any interval you may have hundreds of data points overlapping or very close to one another. The way this optimization technique works is as the C1Chart plots points, if the distance between consecutive data points is less than the radius value you define (in screen pixels), then the data point does not get rendered. In the end we increase performance by rendering fewer chart elements.

LineAreaOptions.SetOptimizationRadius(c1Chart1, 5);

In this screenshot we show the effects of increasing the OptimizationRadius value.

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus