Metro Elements – Amazing new financial charts for Windows Store apps

Here at Mindscape we’re excited about the upcoming release of some great new tools and control suites. One of these is Metro Elements for Windows Store apps, and those of you that are participating in its beta will know it’s looking pretty great. I’m particularly pleased with the new financial chart controls; you get two great controls ready to display market data with little initial configuration needed. To see these in action, you can check out the Youtube video here:

One is the Candlestick Chart, the other is the Stock Chart, also referred to as an Open-High-Low-Close chart. They both display points with that data (OHLC), while varying in their presentation – so you get to choose the type that best suits your client’s data and use cases. The Candlestick chart displays the area between the open and close prices as a shaded box.

It takes just a few quick steps to place one of these charts in your Windows Store app. In your Page’s Xaml, create an instance of a Chart, along with either the StockSeries or CandlestickSeries (I’ll be using the latter) nested inside it:

<ms:CandlestickSeries ItemsSource="{Binding Data}" />

As is standard, we can set the ItemsSource to bind to a Collection property on the DataContext. Metro Elements provides a handy helper object to represent OHLC data points, and we can use that to get our Candlestick chart up and running quickly. The type is StockDataPoint, which resides in Mindscape.MetroElements.Charting. The constructor signature for it looks like this:

public StockDataPoint(DateTime date, double open, double high, double low, double close)

You only need to provide a DataTime along the OHLC values and the CandlestickSeries/StockSeries will display your data immediately. If, however, you already have your own model and data structure for representing OHLC, binding to that is also easy. Firstly set the ItemsSource to the Collection holding your custom OHLC structures. Then, just set the follow properties on CandlestickSeries to specify which model properties contain the relevant data: XBinding, YBinding, LowBinding, HighBinding, OpenBinding, CloseBinding.

Styling the points

You may want to style the points depending on how the point performed that day – if the close is lower than the open, then color the point red, for instance. That’s as easy as providing the desired color to the series:

<ms:CandlestickSeries ItemsSource="{Binding Data}" NegativeSeriesBrush="#FF0000" />

Or, if you want to completely customize the style of the negative or positive points, you can too. This is accomplished by setting NegativeStyle or PositiveStyle.

One of the best features about our Chart control is how modular it is. It’s remarkably easy to get the chart elements you want up and running with a few lines of Xaml, and you can mix and match them as you like. Some great examples are available in the Sample Explorer demo application included with the beta (as well as the full version, naturally) – check out the Composite Charts demo for some ideas.

The Sample Explorer also includes fully working and interactive examples of the two financial charts discussed in this post. Download it and check them out now, they’re available here. The beta includes the financial charts along with 15 other great chart controls, and many other controls for data display and productivity. Thanks for reading; if you have any questions feel free to leave a comment or make a post in our forums.

Tagged as General

Leave a Reply


Join our mailer

You should join our newsletter! Sent monthly:

Back to Top