This blog post compares the performance of the Visiblox and Silverlight Toolkit charts using a simple image processing tool to test and illustrate their differences in performance. The results show that the Visiblox charts are approximately 50 - 100 times faster that the Silverlight Toolkit charts.
I was recently asked by my friends at Visiblox to test out the latest release of their charts for WPF and Silverlight. One of the key features of the Visiblox charts is their performance; they have been designed to both render and update rapidly in response to changes in the underlying data. I decided to put their latest release to the test in a head-to-head against the Silverlight Toolkit charts.
Microsoft announced the release of the Silverlight Toolkit charts in late 2008 and have since released a number of updates, some of which have focussed on performance. I would anticipate that the relatively mature Silverlight Toolkit charts are probably most developer's first choice when they need to display data graphically within their application.
Before we get into the details of my investigation, here are the two applications working side-by-side, one using the Visiblox chart and the other using the Toolkit charts. Click and drag a line across the image to plot the RGB pixel intensities along the line in the chart above. This is a reasonably tough challenge for the chart, with three series rendered of up to 400 points each. From the examples below you can see that the Visiblox charts are clearly faster.
|Visiblox Chart||Silverlight Toolkit Chart|
I have had quite a bit of experience with the Silverlight Toolkit in the past and have written a few blog posts which detail how to add interactivity to the charts. The early releases were pretty slow, due to the large number of 'Control' instances that the chart constructs, (there are un-official guidelines that you should limit the number of control instances to a few hundred for WPF & Silverlight). However, subsequent releases were quite a bit faster. David Anson also published a number of very useful hints and tips on maximising chart performance on his blog. I have followed all of David's guidelines to provide a fair comparison.
The following sections will provide a little more detail regarding the implementation of this application and how it differs between the Visiblox and Toolkit versions.
The markup for the above application is quite simple:
The above markup constructs a Chart, Image and a Line within a
StackPanel. The code-behind loads the image into a
WriteableBitmap in order to access its pixel values, and the mouse event handlers attached to the grid are used to detect when the user drags the line. The technique I published previously on throttling mouse events is used to handle the mouse move event in order to construct the chart data:
The Visiblox series (which implement
IChartSeries) require date to be presented as an
IDataSeries, which is a collection of
IDataPoint instances. In the above code the chart data is copied directly into a
DataSeries. Databinding is also possible via
BindableDataSeries, however, for maximum performance it is always better to use
DataSeries and copy the data across directly.
Silverlight Toolkit Charts
The Toolkit version of the application is much the same as the Visiblox one. The only difference in the application markup is for the chart itself, as shown below:
The markup here is a little more complex, in part because I am following the advice given by David Anson in his charting performance blog post in order to maximise the chart performance. With reference to David's post, the following tips have been implemented:
- Turn off the fade in/out VSM animations - the template used by the
DataPointin my example has no visual states, hence will not be animated
- Change to a simpler
DataPointTemplate - the template in the example is as simple as possible, it is empty!
- Add the points more efficiently - the
ItemsSourcefor each series are being updated via an 'atomic' re-assignment.
- Disable the data change animations - the
TransitionDurationproperty has been set to zero as per David's recommendation.
The other three tips in the blog post were not relevant to this test scenario.
The code-behind for the Toolkit chart version of this application is again much the same as for the Visiblox charts, the main difference is due to the Toolkit chart binding to business objects rather than having its own series type. Here is the implementation of the (throttled) mouse move event handler, and the business object which is bound to the chart.
From the above example application we can see that the Visiblox charts performs approximately 50 - 100 times faster than the Silverlight Toolkit charts. This is of course a limited test that focuses on a specific mode of operation, however, the Visiblox charts have been designed with a focus on performance, so I would expect a similar result in other performance test cases.
The difference in speed between the two charting components can be broadly attributed to three key differences in design:
- Lightweight visuals - as mentioned in the introduction, the Toolkit charts are 'control' heavy, pushing the limits of the framework guidelines, in order to provide flexible styling and templating. The Visiblox charts use a much more lightweight approach, however, if templating is required a TemplatedLineSeries can be used.
- Databinding as an option - with Visiblox it is possible to present the data directly to the chart using the DataSeries class, whilst with the Toolkit charts you have to use databinding which brings with it a performance overhead. Again, with Visiblox you can use databinding to business objects if you wish. With the above Visiblox example application the performance is approximately halved by using databinding, this is still 25-50 times faster than the toolkit charts! (The sourcecode download includes the databinding Visiblox vesion).
- Optimised handling of changes - the Visiblox charts are optimised in such a way as to minimise the impact of changes in the data or other properties of the chart. You can update datapoints, entire series, or change the various properties of an axis and be guaranteed that the chart will only re-computed its layout once.
You can download the full sourcecode for the example applications given in this blog post here: ChartPerformance.zip
Regards, Colin E.