Creating an Infragistics Xamarin.Forms Data Chart

Welcome to our video tutorial for creating a Data Chart with Infragistics XamarinForms. In this video tutorial, you should already have set up your computer for working with Xamarin.Forms (including Android, iOS, and Windows Phone platforms).

We’ve created a new blank app project in visual studio,  (using Xamarin.Forms portable template). Your application should be targeting XamarinForms v1.3.5.6335 or later and you have already watched our other "Getting Started with Infragistics Xamarin.Forms" video.

First, we need to add a new Xamarin.Forms XAML Page and set it as the main page of  the portable project. Therefore, we right click on the project, select Add – New Item… menu item and then select Xamarin.Forms XAML Page template. We change name to ChartPage and click the OK button. Now we change the MainPage property of the Application in the App.cs file to the newly created ChartPage.

In the XAML page, we need to add Infragistics namespace declaration for charts assembly and the local application. Note that we also need local namespaces because we will create an instance of the data source that will be implemented in this application:

xmlns:ig="clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Charts"

xmlns:local="clr-namespace:XamarinApp;assembly=XamarinApp"

 

The Next step is to add Infragistics Data Chart to the XAML page by changing the content of this page to an instance of Data Chart control:

 

< ig:XFDataChart x:Name="Chart" >

    < /ig:XFDataChart >

 

Now, we need to add Category X-Axis and Numeric Y-Axis to the Axes collection of Data Chart. Note that ItemsSource property on Category X-Axis is set to context binding of the chart and this axis has Label property mapped to data column named “Date”. I will go over and explain in detail the process of data binding later:

        < ig:XFDataChart.Axes >

            < ig:NumericYAxis  x:Name="yAxis"   />

            < ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding}" Label="Date" />

        < /ig:XFDataChart.Axes >

 

Next, we need to add Financial Price Series to the Series collection of the Data Chart control. Note that ItemsSource property on the series is also set to context binding of the chart. In addition, this series has XAxis property set to Category X-Axis and YAxis property set to Numeric Y-Axis that we created in previous step. By default, Financial Price Series requires four data column in order to render Open, High, Low, and Close values of financial candle stick.

        < ig:XFDataChart.Series >

            < ig:FinancialPriceSeries ItemsSource="{Binding}"

                                     DisplayType="Candlestick"

                                     XAxis="{x:Reference xAxis}"

                                     YAxis="{x:Reference yAxis}"

                                     HighMemberPath="High" LowMemberPath="Low"

                                     OpenMemberPath="Open" CloseMemberPath="Close" >

            < /ig:FinancialPriceSeries >

        < /ig:XFDataChart.Series >

The next step is to set the data source on the Binding Context property of Data Chart:

< ig:XFDataChart.BindingContext >

            < local:FinancialDataList x:Name="DataSource" />

        < /ig:XFDataChart.BindingContext >

 

Now, we need to implement our data source for the Data Chart. I have already created a  data source by implementing two class models. The Financial Data Item class represents single item of financial data and the Financial Data List class represents a list of financial data item that have randomly generated values for stock volume and stock prices.

In order to explain how data binding works in the Data Chart control, I created a class diagram. So we have Financial Data Item class with 6 data columns (5 numeric for stock values and 1 string data column for storing date values). The Financial Data List implements IEnumerable interface and that is the key to map the ItemsSource of CategoryXAxis and Financial Price series. Both of these ItemsSource properties are of type IEnumerable so any class that implements this interface and contain data items can be mapped to Data Chart.

Note that each series should have appropriate data mappings. In this case, Financial Price series requires four numeric data columns for Open, High, Low, and Close. In addition, CategoryXAxis must have one data column mapped for the axis labels.

At this point, we can run this application and for simplicity reason, I am going to build and run only the Windows Phone application. In a few seconds, the Windows Phone emulator will load our application... Here we have the Infragistics Data Chart with Financial Price series. On horizontal axis, we have CategoryXAxis with labels mapped to dates and on vertical axis, we have NumericYAxis with values corresponding to Open, High, Low, and Close values of financial data.