Live Updating Line Graph in WPF
See a ClickOnce (.NET 3.5) Sample Here
Download the Source Code (VS 2008 Beta 2) Here
A live, updating graph in Windows Presentation Foundation and .NET 3.5 is a natural use of the new framework, and is something that WPF is well suited to do. You can make great visually appealing animated components, and a graph is just one example.
In this example, I have built an attractive, glassy (Vista style) control that presents an array of points ticking accross a graph in real time. The goal was to use this with a market simulator so that you could see the data that the simulation was spitting out. The graph uses the ticks as its concept of "time" in the market, and can readjust its speed based on the speed of the simulator. Cool stuff.
The graph always ticks from the right-most side to the left-most side, with the right-most side being "now" in the market. This is not a simple task, because with the market speed consistently changing, you need to constantly re-adjust your animation speed to ensure that the right most side is always where the next point appears.
Key Points
-
The graph "glows" in intensity based on how far off the median value you are (not zero)
-
A moving average is used to determine how fast the graph is currently moving, and this is a good example of readjusting animation speed to outside variables
-
The control resizes dynamically, the Grid was used to allow most of the resizing, with some code to remove UI elements that are "in the way" when the graph gets really small
-
ControlTemplate were used to style buttons and other elements used in making the graph appealing
-
Extension properties were used to extend Button with additional properties that could be used to find graph glow intensities.
-
The graph duration (time from start to end of the view area) can be changed by using the slider at the bottom of the application
Creating Your Own Data Source
Care to use this in your project? Making the graph use your own data source is simple. Derrive from TickerAdapter class (if you want to see an example look at the RandomTickerAdapter that is supplied in the demo). Add new securities to the collection by calling TickerAdapter.AddSecurity, and add new ticks by calling TickerAdapter.NotifyNewTick.
That's it!
Known Issues
This control was originally made for a demo, not production use. Although it is near production ready, some issues exist.
-
The MiniTicker.Ticks collection is never cleared
-
The Security.Ticks collection is never populated (and not used)
-
There is no way to remove a ticker from the collection of tickers managed by a TickerAdapter.
-
Some performance issues exist when adjusting the time scale. There is no "resolution" of the graph, so if you push the graph to a high duration, all the ticks show, rather than dropping some of the ticks for the scale selected. This is both easy to fix, and not an issue if you're only showing a time window
See a ClickOnce (.NET 3.5) Sample Here
Download the Source Code (VS 2008 Beta 2) Here