Telerik UI for Windows 8 XAML

Overview

The OhlcSeries are usually used to represent financial data. The data points representation consists of:

  • Vertical line - shows the price range (the highest and lowest prices) over one unit of time

  • Tick marks - on each side of the line:

    • Left - Indicate the opening price for the time period.

    • Right - Indicate the closing price for the time period.

  • Color hue - Different color hues could be used to indicate whether prices rose or fell in that period.

This is how the OhlcSeries are represented by the RadCartesianChart.

Ohlc Series
Note

OhlcSeries class inherits from the OhlcSeriesBase class - See the inherited properties.

Example

Here's an example of how to create a RadCartesianChart with OhlcSeries.

  1. First, create a class for the sample data.

    C# Copy imageCopy
    public class FinancialData
    {
        public double High { get; set; }
    
        public double Low { get; set; }
    
        public double Open { get; set; }
    
        public double Close { get; set; }
    }
  2. Then create the sample data.

    C# Copy imageCopy
    List<FinancialData> sampleData = new List<FinancialData>();
    sampleData.Add(new FinancialData() { High = 10, Open = 5, Low = 2, Close = 8 });
    sampleData.Add(new FinancialData() { High = 15, Open = 7, Low = 3, Close = 5 });
    sampleData.Add(new FinancialData() { High = 20, Open = 15, Low = 10, Close = 19 });
    sampleData.Add(new FinancialData() { High = 7, Open = 2, Low = 1, Close = 5 });
    sampleData.Add(new FinancialData() { High = 25, Open = 15, Low = 10, Close = 12 });
    
    this.ohlcSeries.DataContext = sampleData;
  3. Finally, create the chart using XAML.

    XAML Copy imageCopy
    <telerik:RadCartesianChart x:Name="ohlcSeries">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:OhlcSeries ItemsSource="{Binding}">
                <telerik:OhlcSeries.HighBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="High"/>
                </telerik:OhlcSeries.HighBinding>
                <telerik:OhlcSeries.LowBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Low"/>
                </telerik:OhlcSeries.LowBinding>
                <telerik:OhlcSeries.OpenBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Open"/>
                </telerik:OhlcSeries.OpenBinding>
                <telerik:OhlcSeries.CloseBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Close"/>
                </telerik:OhlcSeries.CloseBinding>
            </telerik:OhlcSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

See Also

Other Resources