XamarinT Light_870x220

We have just added a number of new series to the charts available to you with Telerik UI for Xamarin, making it even easier to present financial and other data visually.

In this blog post I will introduce you to the recently released Donut and Financial series for the Pie and Cartesian Charts in Xamarin.Forms. Those of you who were impatient for the features to be included in the Xamarin.Forms offering are probably aware that up until the recent release you could have added such series directly in the native controls. However, each platform had its specific implementation details and unifying the API in Forms was a natural step in expanding the reach of Telerik UI for Xamarin.

Donut Series

First, let’s have a look at the Donut series and how they can be included in the Pie chart. They're actually pretty similar to the already available Pie Series, with the only difference being the element used for the visualization. The Donut series basically add an additional empty space inside the chart which can be controlled through the InnerRadiusFactor property. The image below shows the two series side by side for better comparison:

donut_pie_comparison

There is nothing new in the way you include the series to the Pie Chart as well – simply add them to the dedicated collection of the control:

<telerikChart:RadPieChart>
    <telerikChart:RadPieChart.BindingContext>
        <local:ViewModel />
    </telerikChart:RadPieChart.BindingContext>
    <telerikChart:RadPieChart.Series>
        <telerikChart:DonutSeries ShowLabels="True"
                      InnerRadiusFactor="0.4"
                      ValueBinding="Value"
                      ItemsSource="{Binding Data}" />
    </telerikChart:RadPieChart.Series>
</telerikChart:RadPieChart>

Based on your demand, we have included a couple of new series types within the Telerik UI for Xamarin Cartesian Chart as well – Candlestick and OHLC series. Furthermore, we have added some of the most popular financial indicators which you can use separately or in combination with the financial series. Below you can find some more information on the functionality these new elements grant you.

Financial Series

The financial series are specifically designed to provide information regarding a particular financial instrument such as stocks and the open, high, low and close values that it has at a specific time. Thus, the OHLC and Candlestick series require a collection of data points which have such values. Like any categorical series, both financial series need a category binding as well. The series are mainly used in a scenario with a numerical vertical axis and a horizontal date time axis in order to show the different values of the stock at a specific time.

As the saying goes “a picture is worth a thousand words” and in the financial world probably more than that :). Let’s visualize a scenario – suppose you would like to add information regarding the movement of Apple’s stock over a period of time - in this case we are going to show the data for less than a month. We are going to need a collection of points with the respective data for the different days:

public class OhlcDataPoint
{
public double Open { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Close{ get; set; }
public DateTime Category{ get; set; }
}

You can eventually create the collection which will hold the points and add the needed values. For example:

this.SeriesData = new ObservableCollection<OhlcDataPoint>();
this.SeriesData.Add(new OhlcDataPoint() { High = 10, Open = 5, Low = 2, Close = 8, Category = new DateTime(1990,1,1)});
. . .

Add as many points as you want.

Here is how the CartesianChart is created:

<telerikChart:RadCartesianChart PaletteName="Light"
                  SelectionPaletteName="LightSelected"
                  BackgroundColor="White" >
     <telerikChart:RadCartesianChart.BindingContext>
         <local:ViewModel />
     </telerikChart:RadCartesianChart.BindingContext>
     <telerikChart:RadCartesianChart.HorizontalAxis>
         <telerikChart:DateTimeContinuousAxis LineColor="#A9A9A9"
                              LabelFitMode="Rotate"
                              LabelFormat="dd/MM"
                              PlotMode="BetweenTicks"
                              MajorStep="2"
                              MajorStepUnit="Day"/>
     </telerikChart:RadCartesianChart.HorizontalAxis>
     <telerikChart:RadCartesianChart.VerticalAxis>
         <telerikChart:NumericalAxis LineColor="#A9A9A9"
                         Minimum="320"
                         Maximum="350"
                         MajorTickBackgroundColor="#A9A9A9" />
     </telerikChart:RadCartesianChart.VerticalAxis>
     <telerikChart:RadCartesianChart.Series>
         <telerikChart:OhlcSeries CategoryBinding="Category"
                       DisplayName="AppleStocks-OHLC"
                       OpenBinding="Open"
                       HighBinding="High"
                       LowBinding="Low"
                       CloseBinding="Close"
                       ItemsSource="{Binding SeriesData}"/>
     </telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>

Those of you who have used the CartesianChart will notice that there is nothing special about the setup – just the type of series and data it uses is different.

And finally, the promised picture. Actually, let’s make it two – the first one shows the candlestick series on Android and the second shows the OHLC series on iOS.

ohlc_candlestick_blog
Let’s dissect the different visual elements:

financial_blog_2

On Android, the candlestick unit will be filled if the close value is higher than the open value - that is, if the stock went up. In iOS, the red color indicates that the stock went down.

Financial Indicators

The financial (or stock) indicators are mainly used for keeping track of stock prices and patterns of price changes over time. You can find more information about what indicators there are and what they are used for at this link.

In terms of using the indicators in RadCartesianChart, you will need to add them as you would add any other Cartesian series. Every indicator has a related formula by which it calculates the expected result. All you have to do is provide the needed data. Here is a snippet that shows a scenario of OHLC series and a couple of Exponential Moving Average indicators:

<telerikChart:RadCartesianChart.Series>
<telerikChart:OhlcSeries  CategoryBinding="Category"
                DisplayName="AppleStocks-OHLC"
                OpenBinding="Open"
                HighBinding="High"
                LowBinding="Low"
                CloseBinding="Close"
                ItemsSource="{Binding SeriesData}"/>
 
<telerikChart:ExponentialMovingAverageIndicator 
                              
CategoryBinding="Category"
       DisplayName="EMA 7days"
       ValueBinding="Close"
       Period="7"
       StrokeThickness="1"
       Stroke="DarkGreen"
       ItemsSource="{Binding SeriesData}"/>
 
<telerikChart:ExponentialMovingAverageIndicator
                          
CategoryBinding="Category"
   DisplayName="EMA 14days"
   
ValueBinding="Close"
   Period="14"
   StrokeThickness="1"
   Stroke="DarkOrange"
   ItemsSource="{Binding SeriesData}"/>
 
</telerikChart:RadCartesianChart.Series>

There are two types of indicators in terms of setting their properties and getting them ready for displaying your stock data:

Indicators that have a category and a value (usually the close one) bindings as well as one or more periods. Here are the available indicators:

  • OscillatorIndicator
  • RateOfChangeIndicator
  • RelativeStrengthIndexIndicator
  • TrixIndicator
  • WeightedMovingAverageIndicator
  • ExponentialMovingAverageIndicator
  • AdaptiveMovingAverageKaufmanIndicator
  • BollingerBandsIndicator
  • RelativeMomentumIndexIndicator
  • MacdIndicator

Indicators that have a category and high/low/close value bindings as well as one or more periods:

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

The image below shows a simple scenario where a couple of Exponential Moving Average (EMA) indicators with different periods are added.

financial_series_blog

Have we caught your interest? Check out the available examples in the SDK Samples Browser and QSF applications where you can find various demos of the series and the financial indicators. 

Well, the above information should be sufficient to get you started with the financial and donut series. Of course, the world of finance and data visualization is quite a vast topic, so any feedback on the new additions is highly appreciated. If you would like us to add other indicators, expose behaviors which you believe will be helpful or have any other ideas, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback Portal.

Lastly, if you're new to Telerik UI for Xamarin, you can learn more about it here or dive right into a free 30 day trial today.

Stefan Nenchev
About the Author

Stefan Nenchev

Stefan is a Technical Support Engineer on the Telerik UI for Xamarin team. Previously, he was a part of the WPF and Silverlight team. Apart from work, Stefan enjoys all kinds of sport activities such as basketball, football, snowboarding and hiking.   

Related Posts

Comments

Comments are disabled in preview mode.