New to Telerik UI for .NET MAUI? Start a free 30-day trial

Financial Indicators

The financial, or also called stock, indicators are mainly used for keeping track of stock prices and patterns of price changes over time. For more information about what indicators are and what their purpose is, refer to the Short information about financial indicators article.

In terms of using the indicators in the RadCartesianChart, you need to add them in the same way you add any other Cartesian series. Every indicator has a related formula by which it calculates the expected result. All you need to do is provide the needed data.

In terms of setting their properties and getting them ready for displaying your stock data, the financial indicators are two types:

  • Indicators that have a category and a value binding (usually the close one) as well as one or more periods:

    • OscillatorIndicator
    • RateOfChangeIndicator
    • RelativeStrengthIndexIndicator
    • TrixIndicator
    • WeightedMovingAverageIndicator
    • ExponentialMovingAverageIndicator
    • AdaptiveMovingAverageKaufmanIndicator
    • BollingerBandsIndicator
    • RelativeMomentumIndexIndicator
    • MacdIndicator
  • Indicators that have a category and high, low, or close value bindings as well as none, one, or more periods:

    • AverageTrueRangeIndicator
    • CommodityChannelIndexIndicator
    • StochasticFastIndicator
    • StochasticSlowIndicator
    • TrueRangeIndicator
    • UltimateOscillatorIndicator

Example

The following example shows how to create a basic RadCartesianChart with an OHLC Series and how to set a couple of ExponentialMovingAverageIndicator instances with different periods.

  1. Define the RadCartesianChart.

    <telerik:RadCartesianChart PaletteName="Light" 
                             SelectionPaletteName="LightSelected"
                             BackgroundColor="White" >
      <telerik:RadCartesianChart.BindingContext>
          <local:ViewModel />
      </telerik:RadCartesianChart.BindingContext>
      <telerik:RadCartesianChart.HorizontalAxis>
          <telerik:DateTimeContinuousAxis LineColor="#A9A9A9"
                                          LabelFitMode="Rotate"
                                          LabelFormat="dd/MM"
                                          PlotMode="BetweenTicks" 
                                          MajorStep="2"
                                          MajorStepUnit="Day"/>
      </telerik:RadCartesianChart.HorizontalAxis>
      <telerik:RadCartesianChart.VerticalAxis>
          <telerik:NumericalAxis LineColor="#A9A9A9"
                                 Minimum="320"
                                 Maximum="350"
                                 MajorTickBackgroundColor="#A9A9A9" />
      </telerik:RadCartesianChart.VerticalAxis>
      <telerik:RadCartesianChart.Series>
          <telerik:OhlcSeries CategoryBinding="Category"
                              DisplayName="AppleStocks-OHLC"
                              OpenBinding="Open"
                              HighBinding="High"
                              LowBinding="Low"
                              CloseBinding="Close"
                              ItemsSource="{Binding SeriesData}"/>
    
          <telerik:ExponentialMovingAverageIndicator CategoryBinding="Category"
                                                     DisplayName="EMA 7days"
                                                     ValueBinding="Close"
                                                     Period="7"
                                                     StrokeThickness="1"
                                                     Stroke="DarkGreen"
                                                     ItemsSource="{Binding SeriesData}"/>
    
          <telerik:ExponentialMovingAverageIndicator CategoryBinding="Category"
                                                     DisplayName="EMA 14days"
                                                     ValueBinding="Close"
                                                     Period="14"
                                                     StrokeThickness="1"
                                                     Stroke="DarkOrange"
                                                     ItemsSource="{Binding SeriesData}"/>
      </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
    
  2. Define the business model:

    public class OhlcDataPoint : NotifyPropertyChangedBase
    {
    private DateTime category;
    private double open;
    private double high;
    private double low;
    private double close;
    
    public DateTime Category
    {
        get { return this.category; }
        set
        {
            if (value != this.category)
            {
                this.category = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double Open
    {
        get { return this.open; }
        set
        {
            if (value != this.open)
            {
                this.open = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double High
    {
        get { return this.high; }
        set
        {
            if (value != this.high)
            {
                this.high = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double Low
    {
        get { return this.low; }
        set
        {
            if (value != this.low)
            {
                this.low = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double Close
    {
        get { return this.close; }
        set
        {
            if (value != this.close)
            {
                this.close = value;
                this.OnPropertyChanged();
            }
        }
    }
    }
    
    1. And the ViewModel:

In this article
Not finding the help you need?