Skip to main content Skip to footer

High Performance Charting in WinRT with DirectX

The 2013 v2 release of Studio for WinRT XAML introduced DirectX rendering in the C1Chart control. By just setting the RenderMode property on any data series within the chart, you can enable this high performance alternative to render up to 500,000 data points in seconds. By default, when not using DirectX, the C1Chart control renders all plot elements as native XAML elements. This enables more flexibility - for instance you can very easily customize plot elements appearance, behaviors, animations and so on. Even though the control takes advantage of UI virtualization when axis scaling is enabled, the performance degrades with the more data points you try to plot per second because very many elements are being rendered in the visual tree. DirectX rendering is an option for when performance is your number one priority for displaying a large amount of points. It uses low level Direct2D graphics routines that integrate into XAML by taking advantage of new Windows 8 capabilities. As a trade-off for better performance, some features are no longer supported such as special chart types (Radar, Pie, Gantt, Candle, Bubble), as well as the PlotElementLoaded event. The PlotElementLoaded event is a commonly used extensibility point for customizing the chart on an individual plot element basis. This event no longer fires when using the DirectX render mode in order to achieve the fastest performance. DirectX rendering has the same restrictions as the Bitmap rendering mode in the WPF version of C1Chart. To use the DirectX render mode, simply set the RenderMode property on the data series object to 'Direct2D.' It's that simple.


<c1:C1Chart ChartType="XYPlot">  
    <c1:C1Chart.Data>  
        <c1:ChartData ItemsSource="{Binding MyPoints}">  
            <c1:XYDataSeries RenderMode="Direct2D"  
                             XValueBinding="{Binding XValue}"  
                             ValueBinding="{Binding Value}"/>  
        </c1:ChartData>  
    </c1:C1Chart.Data>  
</c1:C1Chart>  

You can download and run a sample below. Note, that you will also need to install Studio for WinRT XAML and then add a reference to C1.Xaml.Chart in the sample. http://our.componentone.com/samples/winrtxaml-chartsamples/ You can also check out my video series which demonstrates several techniques for data binding and populating the C1Chart control in code. Chart_DirectX http://our.componentone.com/2013/10/08/getting-started-with-componentone-chart-video-series-1-2/

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus