Real time charts in WPF

[JuanC]

Real time support is one of those features that had to be cut from 8.0 because of the schedule, but customer feedback in both our forums and email was loud and clear, there are some of you that need to update the chart often and need a high performance redraw strategy.

Before we go into the real time API and behavior in Chart FX for WPF 8.1 let’s discuss how the chart control responds to non-realtime changes in the data

 

Binding to objects that support INotifyPropertyChanged

 

When Chart FX receives a collection of CLR objects that support INotifyPropertyChanged, it will attach to the PropertyChanged event, then as soon as the event is fired because of a property change the chart will process the new value and mark itself as dirty. Note that this means that if you change more than one of your CLR objects quickly the chart will only “repaint” once. The quotes around repaint are because it is a little more complex than that, we will run our paint code but then detect that the changes do not need a full WPF redraw and instead animate the data changes.

 

Binding to a collection that support INotifyCollectionChanged

 

If the collection passed to Chart FX supports this interface we will also track changes to the collection, when the collection fires its Collection changed event the chart will process the new data and then mark itself as dirty, normally you will not get animations in this scenario. We will process the data changes immediately but delay the painting so it is also possible that if you add two objects to the collection quickly we will only repaint the chart once.

 

Real Time Support

 

In both these scenarios, Chart FX is going through a full repaint process which works fine for casual use but if the data changes often (e.g. once per second or quicker) it will probably generate high CPU usage, enter the real time API, when using this API you will first configure the maximum number of points the chart will hold, once this number is reached, each additional value will bump the oldest value out of the chart to keep memory usage steady.

 

chart1.RealTime.BufferSize = 120;
chart1.Data.Series = 1;
chart1.Data.Points = 120;

 

You will then run a code similar to this every time you want to add one or more points to the chart

 

chart1.RealTime.BeginAddData(1, RealTimeAction.Append);
chart1.Data[0, 0] = newValue;
//chart1.Data[0, 1] = newValue2;
chart1.RealTime.EndAddData(false, false);

 

The first parameter to BeginAddData indicates the number of points you plan to add, note that when adding the points you will use 0 based index for the points regardless of how many points have been added to the chart before this. The first boolean parameter to EndData specifies whether labels should be scrolled, the second specifies whether the chart should scroll to the end if scrolling is enabled.

 

Once we receive the data we do not a run a standard paint process but instead process the new data and move the visual objects accordingly, because of this we only support realtime in conjunction with certain gallery types (Bar, Line and Area), also several features such as stacked are currently unsupported in realtime.

 

Performance is still being tweaked but a chart holding hundreds of points and being updated 1 – 5 times per second will only use a small percentage of the CPU (1 – 10%) even on a laptop.

 

JuanC

[amtuter]

I really loved this interesting article. Please keep up the good work. Regards from John... ==-==