Getting Started with Xuni FlexChart for Xamarin.Forms

Xuni is our collection of cross-platform mobile controls which allow users to provide native experiences on Android, iOS, and Windows Phone. Our new Xuni FlexChart control allows you to visualize data into a number of different Cartesian chart types including Bar, Column, Area, Line, Line & Symbols, Scatter, Bubble, High-Low-Open-Close, and Candle. This guide is meant to be a reference source for creating an initial Xamarin.Forms Project in Visual Studio using a Xuni FlexChart. First, you will need to create a Xamarin.Forms Project. This can be accomplished through the following steps:

1. Select File -> New -> Project
2. Next, under installed templates, select Visual C# -> Mobile Apps
3. Select Blank App (either Xamarin.Forms Portable or Xamarin.Forms Shared)
4. Name your application, set the file location, and click OK to save it.

Next, we will need to add a few Xuni references to the project in order for us to use the controls. This will only require a few steps and should be a familiar process for anyone who has used Nuget Packages in the past:

1. Select Project -> Manage Nuget Packages
2. Click Online on the left and select GrapeCity
3. Install all of desired packages for you application (Xuni.ChartCore, Xuni.Core, and Xuni.Flexchart in this example)

Now, we can start adding some code to our project. First, we will create a new class as a data source for our FlexChart. Inside this class we can add the following code:

    public class FlexChartDataSource  
    {  
        private List<Quarter> appData;  

        public List<Quarter> Data  
        {  
            get { return appData; }  
        }  

        public FlexChartDataSource()  
        {  
            //// appData  
            appData = new List<Quarter>();  
            var quarterNames = "Q1, Q2, Q3, Q4".Split(',');  
            var salesData = new[] { 6833, 11100, 10833, 15350 };  
            var downloadsData = new[] { 8500, 7933, 11666, 12350 };  
            var expensesData = new[] { 11166, 10166, 7333, 8166 };  
            for (int j = 0; j < 4; j++)  
            {  
                Quarter tempQuarter = new Quarter();  
                tempQuarter.Name = quarterNames[j];  
                tempQuarter.Sales = salesData[j];  
                tempQuarter.Downloads = downloadsData[j];  
                tempQuarter.Expenses = expensesData[j];  
                appData.Add(tempQuarter);  

            }  
        }  
    }  
    public class Quarter  
    {  
        string _name;  
        long \_sales, \_downloads, _expenses;  

        public string Name  
        {  
            get { return _name; }  
            set { _name = value; }  
        }  

        public long Sales  
        {  
            get { return _sales; }  
            set { _sales = value; }  
        }  

        public long Downloads  
        {  
            get { return _downloads; }  
            set { _downloads = value; }  
        }  
        public long Expenses  
        {  
            get { return _expenses; }  
            set { _expenses = value; }  
        }  
    }  

We’re now able to add the FlexChart control into a new Forms Xaml page. Add a new class (in this sample NewChart.xaml) and modify the code behind as follows:

using Xuni.Xamarin.FlexChart;  

From here we can instantiate the FlexChart control and set the binding context for the FlexChart:

public static FlexChart GetChartControl()  
        {  
            //Create an instance of the Control and set its properties  
            FlexChart chart = new FlexChart();  
            chart.ChartType = ChartType.Area;  
            //Set the datasource  
            FlexChartDataSource ds = new FlexChartDataSource();  
            chart.ItemsSource = ds.Data;  
            chart.BindingX = "Name";  

            //Create a new chart series  
            List<ChartSeries> seriesList = new List<ChartSeries>();  
            seriesList.Add(new ChartSeries(chart, "2014 Sales", "Sales"));  
            seriesList.Add(new ChartSeries(chart, "2014 Downloads", "Downloads"));  
            seriesList.Add(new ChartSeries(chart, "2014 Expenses", "Expenses"));  

            chart.Series.Add(seriesList[0]);  
            chart.Series.Add(seriesList[1]);  
            chart.Series.Add(seriesList[2]);  
            return chart;  
        }  

Next we will make some changes to the Xaml as follows to include the Xuni reference:

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
x:Class="FirstFlexChart.NewChart"   
xmlns:xuni="clr-namespace:Xuni.Xamarin.FlexChart;assembly=Xuni.Xamarin.FlexChart" >  

We can further instantiate the FlexChart control using the following markup:

  <StackLayout>  
    <xuni:FlexChart x:Name="chart"  ItemsSource="{Binding Data}" BindingX="Name"  
     Grid.Row="1" Grid.ColumnSpan="2">  
    </xuni:FlexChart>  
  </StackLayout>  
</ContentPage>  

We’re now approaching the point where we can run the Project. We need to adjust the App.cs code to load our FlexChart control. The following changes are necessary in order for the FlexChart to load on the Main Page:

public App()  
        {  
            // The root page of your application  
            MainPage = new ContentPage  
            {  
                Content = NewChart.GetChartControl()  
            };  
        }  

Finally, there are a few small platform specific changes that are necessary. For iOS applications, you will need to add a line to AppDelegate.cs within the .iOS solution. Inside the method FinishedLaunching() add the following line:

Xuni.Xamarin.FlexChart.Platform.iOS.Forms.Init();  

Windows Phone applications will also require a small change. Within the .WinPhone application, open up the MainPage.xaml.cs and add the following code to the class constructor:

Xuni.Xamarin.FlexChart.Platform.WinPhone.FlexChartRenderer.Init();  

Finally the project should be properly licensed before to avoid nag screens at run time. There are detailed instructions posted on our licensing page. You should now be able to pick a startup project for the platform you want to work with, run the project and view your application in action on your platform of choice. Download FirstFlexChart Sample