Quick Start: Add Data to FlexChart

This section describes how to add a FlexChart control to your portable or shared app and add data to it. For information on how to add Xuni components in C# or XAML, see Adding Xuni Components using C# or Adding Xuni Components using XAML.

This topic comprises of three steps:

Step 1: Create a Datasource for FlexChart
Step 2: Add a FlexChart control
Step 3: Run the Project

The following image shows how the FlexChart appears, after completing the steps above:

Step 1: Create a Datasource for FlexChart

The following classes serve as a datasource for the FlexChart control.

C#	Copy Code
public class FlexChartDataSource { private List<Month> appData; public List<Month> Data { get { return appData; } } public FlexChartDataSource() { // appData appData = new List<Month>(); var monthNames = "Jan,Feb,March,April,May,June,July,Aug,Sept,Oct,Nov,Dec".Split(','); var salesData = new[] { 5000, 8500, 7000, 6500, 12000, 14800, 18500, 7500, 6500, 13000, 20000, 9000 }; var downloadsData = new[] { 6000, 7500, 12000, 5800, 11000, 7000, 16000, 17500, 19500, 13250, 13800, 19000 }; var expensesData = new[] { 15000, 18000, 15500, 18500, 11000, 16000, 8000, 7500, 6500, 6000, 13500, 5000 }; for (int i = 0; i < 12; i++) { Month tempMonth = new Month(); tempMonth.Name = monthNames[i]; tempMonth.Sales = salesData[i]; tempMonth.Downloads = downloadsData[i]; tempMonth.Expenses = expensesData[i]; appData.Add(tempMonth); } } } public class Month { 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; } } }

Copy Code

public class FlexChartDataSource
{
    private List<Month> appData;

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

    public FlexChartDataSource()
    {
        // appData
        appData = new List<Month>();
        var monthNames = "Jan,Feb,March,April,May,June,July,Aug,Sept,Oct,Nov,Dec".Split(',');
        var salesData = new[] { 5000, 8500, 7000, 6500, 12000, 14800, 18500, 7500, 6500, 13000, 20000, 9000 };
        var downloadsData = new[] { 6000, 7500, 12000, 5800, 11000, 7000, 16000, 17500, 19500, 13250, 13800, 19000 };
        var expensesData = new[] { 15000, 18000, 15500, 18500, 11000, 16000, 8000, 7500, 6500, 6000, 13500, 5000 };
        for (int i = 0; i < 12; i++)
        {
             Month tempMonth = new Month();
             tempMonth.Name = monthNames[i];
             tempMonth.Sales = salesData[i];
             tempMonth.Downloads = downloadsData[i];
             tempMonth.Expenses = expensesData[i];
             appData.Add(tempMonth);
    
        }
    }
}

public class Month
{
    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; }
    }
}

Step 2: Add a FlexChart control

Complete the following steps to initialize a FlexChart control in C# or XAML.

In Code

Add a new class (for example QuickStart.cs) to your Portable or Shared project and include Xuni FlexChart and Xamarin references as shown below.
C#
Copy Code
using Xuni.Xamarin.FlexChart; using Xamarin.Forms;

C#	Copy Code
using Xuni.Xamarin.FlexChart; using Xamarin.Forms;

Instantiate a FlexChart control in a new method GetChartControl().

C#	Copy Code
public static FlexChart GetChartControl() { //Create an instance of the Control and set its properties FlexChart chart = new FlexChart(); //Set the datasource FlexChartDataSource ds = new FlexChartDataSource(); chart.ItemsSource = ds.Data; chart.BindingX = "Name"; //Create a new chart series ChartSeries _series = new ChartSeries(chart, "2014 Sales", "Sales"); _series.ChartType = ChartType.Column; chart.Series.Add(_series); return chart; }

Copy Code

public static FlexChart GetChartControl()
{
    //Create an instance of the Control and set its properties
    FlexChart chart = new FlexChart();
    
    //Set the datasource
    FlexChartDataSource ds = new FlexChartDataSource();
    chart.ItemsSource = ds.Data;
    chart.BindingX = "Name";
  
    //Create a new chart series
    ChartSeries _series = new ChartSeries(chart, "2014 Sales", "Sales");
    _series.ChartType = ChartType.Column;
    chart.Series.Add(_series);
    
    return chart; 
}

In XAML

Add a new Forms XAML Page (for example QuickStart.xaml) to your Portable or Shared project and modify the <ContentPage> tag to include the Xuni reference as shown below.

XAML	Copy Code
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Xamarin.FlexChart;assembly=Xuni.Xamarin.FlexChart" >

XAML

Copy Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Appl.QuickStart"
xmlns:xuni="clr-namespace:Xuni.Xamarin.FlexChart;assembly=Xuni.Xamarin.FlexChart" >

Initialize a FlexChart control by adding the markup for the control between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags, as shown below.

XAML	Copy Code
<StackLayout> <xuni:FlexChart x:Name="chart" ItemsSource="{Binding Data}" BindingX="Name" ChartType="Column" Grid.Row="1" Grid.ColumnSpan="2"> <xuni:FlexChart.Series> <xuni:ChartSeries x:Name="Sales2014" Name =" 2014 Sales" Binding="Sales" ></xuni:ChartSeries> </xuni:FlexChart.Series> </xuni:FlexChart> </StackLayout>

XAML

Copy Code

<StackLayout>
  <xuni:FlexChart x:Name="chart"  ItemsSource="{Binding Data}" BindingX="Name" ChartType="Column"
   Grid.Row="1" Grid.ColumnSpan="2">
    <xuni:FlexChart.Series>
      <xuni:ChartSeries x:Name="Sales2014" Name =" 2014 Sales" Binding="Sales" ></xuni:ChartSeries>
    </xuni:FlexChart.Series>
  </xuni:FlexChart>
</StackLayout>

In the Solution Explorer, expand the QuickStart.xaml node and open QuickStart.xaml.cs to open the C# code behind.
In the QuickStart() class constructor, set the BindingContext for the FlexChart.
The following code shows what the QuickStart() class constructor looks like after completing this step.
C#
Copy Code
public QuickStart() { InitializeComponent(); chart.BindingContext = new FlexChartDataSource(); }

C#	Copy Code
public QuickStart() { InitializeComponent(); chart.BindingContext = new FlexChartDataSource(); }

Step 3: Run the Project

In the Solution Explorer, double click App.cs to open it.
Complete the following steps to display the FlexChart control.
- To return a C# class: In the class constructor App(), set a new ContentPage as the MainPage and assign the control to the ContentPage's Content by invoking the method GetChartControl() defined in the previous procedure, Step 2: Add a FlexChart Control.
  The following code shows the class constructor App() after completing steps above.
  C#
  Copy Code
  
  public App() { // The root page of your application MainPage = new ContentPage { Content = QuickStart.GetChartControl() }; }
- To return a Forms XAML Page: In the class constructor App(), set the Forms XAML Page QuickStart as the MainPage.
  The following code shows the class constructor App(), after completing this step.
  C#
  Copy Code
  
  public App() { // The root page of your application MainPage = new QuickStart(); }
Some additional steps are required to run iOS and WinPhone apps:
- iOS App:
  1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.
  2. Add the following code to the FinishedLaunching() method.
    C#
    Copy Code
    
    Xuni.Xamarin.FlexChart.Platform.iOS.Forms.Init();
- WinPhone App:
  1. In the Solution Explorer, expand MainPage.xml.
  2. Double click MainPage.xml.cs to open it.
  3. Add the following code to the class constructor.
    C#
    Copy Code
    
    Xuni.Xamarin.FlexChart.Platform.WinPhone.FlexChartRenderer.Init();
Press F5 to run the project.