Most charts show one point at a time on a Cartesian (x/y) coordinate. That is, a single point might indicate that July sales were $525MM while August sales (a second point) were $350MM. The chart might also show a line connecting the two points to show the change in value. But each individual entry is typically a single point on the coordinate system.
With stocks, we’d like to show four bits of information for each entry:
There is no good way to do this by drawing points on an X/Y grid, but the Financial Chart from Telerik overcomes this limitation by using lines and boxes. The line indicates the high and low for the day and the box indicates the open and closing prices. A solid box has a higher close, an open box has a lower close.
You can see at a glance the relative range of prices a stock had over the course of a day and the size of the delta between opening and closing price. A great deal of information is packed into a small picture.
Creating this chart, however, is no more difficult than using any of the other variations in the RadCartesianChart in the Telerik Windows 8 UI Controls.
We begin, as always, with the data. Create a class to represent each stock,
Create a View Model which will serve as the Data Context for the class. The VM will implement INotifyPropertyChanged,
The VM will also have a public property, Stocks, which represents your portfolio.
Finally, the VM will fill the portfolio, standing in for obtaining this data from a DataBase or other server,
The chart itself, of course, is declared in MainPage.xaml WE begin by declaring a RadCartesianChart and giving it a name,
We then create the Horizontal and Vertical Axes. The former is a Categorical Axis (the categories being the stock names) and the latter is a Linear Axis (to hold the values),
Let’s turn on the grid lines so that we can easily line up the prices,
We’re ready to create our “CandleStickSeries” – that is the series of CandleSticks that represent the four bits of data,
Notice, as with other collections, we set the ItemsSource property to bind to the Stocks collection of Stock data.
The first candlestick is for the high price for the day,
This is followed by the candlesticks for the low, for the open and for the close,
With all the series in place, we need only set the DataContext for the chart, which we do in the code-behind,
You can see that it is quite easy to get a Financial series up and running very quickly. You can download the Telerik Windows 8 Controls here.
Download the source code for this example.
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter
Subscribe to be the first to get our expert-written articles and tutorials for developers!