Showing 4 Data Points At Once: Financial Chart

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:

• The opening price
• The closing price
• The high for the day
• The low for the day

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,

public class Stock

{

 public double High { get; set; }

 public double Low { get; set; }

 public double Open { get; set; }

 public double Close {get; set; }

}

Create a View Model which will serve as the Data Context for the class.  The VM will implement INotifyPropertyChanged,

public class MainViewModel : INotifyPropertyChanged

{

 public event PropertyChangedEventHandler PropertyChanged;

 private void OnPropertyChanged(

               [CallerMemberName] string caller = "" )

    {

 if ( PropertyChanged != null )

        {

            PropertyChanged( this, new PropertyChangedEventArgs( caller ) );

        }

    }

The VM will also have a public property, Stocks, which represents your portfolio. 

private List<Stock> stocks;

public List<Stock> Stocks

{

    get { return stocks; }

    set

    {

        stocks = value;

        OnPropertyChanged();

    }

}

Finally, the VM will fill the portfolio, standing in for obtaining this data from a DataBase or other server,

public MainViewModel()

{

    LoadData();

}

private void LoadData()

{

    var myStocks = new List<Stock>();

    myStocks.Add( new Stock() { Open = 35.0, Close = 42.0, High = 65.5, Low = 18.7 } );

    myStocks.Add( new Stock() {  Open = 45.5, Close = 49.1, High = 50.5, Low = 38.1 } );

    myStocks.Add( new Stock() {  Open = 57.9, Close = 47.8, High = 65.3, Low = 26 } );

    myStocks.Add( new Stock() {  Open = 44.4, Close = 38.8, High = 58.7, Low = 27.2 } );

    Stocks = myStocks;

}

The chart itself, of course, is declared in MainPage.xaml  WE begin by declaring a RadCartesianChart and giving it a name,

<telerik:RadCartesianChart PaletteName="DefaultDark" Name="xFinancialSeries">

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),

<telerik:RadCartesianChart.HorizontalAxis>

 <telerik:CategoricalAxis />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

 <telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

Let’s turn on the grid lines so that we can easily line up the prices,

<telerik:RadCartesianChart.Grid>

 <telerik:CartesianChartGrid MajorLinesVisibility="XY" />

</telerik:RadCartesianChart.Grid>

We’re ready to create our “CandleStickSeries” – that is the series of CandleSticks that represent the four bits of data,

<telerik:CandlestickSeries ItemsSource="{Binding Stocks}"> 

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,

<telerik:CandlestickSeries.HighBinding>

 <telerik:PropertyNameDataPointBinding PropertyName="High" />

</telerik:CandlestickSeries.HighBinding>

This is followed by the candlesticks for the low, for the open and for the close,

<telerik:CandlestickSeries.LowBinding>

 <telerik:PropertyNameDataPointBinding PropertyName="Low" />

</telerik:CandlestickSeries.LowBinding>

<telerik:CandlestickSeries.OpenBinding>

 <telerik:PropertyNameDataPointBinding PropertyName="Open" />

</telerik:CandlestickSeries.OpenBinding>

<telerik:CandlestickSeries.CloseBinding>

 <telerik:PropertyNameDataPointBinding PropertyName="Close" />

</telerik:CandlestickSeries.CloseBinding>

With all the series in place, we need only set the DataContext for the chart, which we do in the code-behind,

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    xFinancialSeries.DataContext = new MainViewModel();

}

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.