Charts are an efficient way to visually present data in health monitoring applications as it helps users monitor their progress easily, rather than having to read through past records.

This topic uses data binding and mixed charts to demonstrate how to display nutrient consumption and the weight lost or gained over a week. It also shows how to set a baseline value for the goal weight and change the color of the series if the weight exceeds this value through conditional formatting.

This topic comprises of three steps:

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

The following image shows how FlexChart appears if the weight entered for each day is below 150 lbs (baseline value).

The following image shows how FlexChart appears when the weight entered is equal to or greater than 150 lbs (baseline value) at any point.

Step 1: Create a Datasource

The following classes serve as a datasource for the FlexChart control. Declare a variable goalWeight to monitor the maximum weight limit. Enter an array of values for the line chart series that represent the weight and set the condition to change the color of the line if the value entered exceeds the specified goal weight.

public class WMDataSource
{
   public Color weightColor;
   public double goalWeight = 150;

   private List<DataPerDay> appData;

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

   public WMDataSource()
   {
       appData = new List<DataPerDay>();

       //set initial Series Color
       weightColor = new Color();
       weightColor = Color.Green;

       //values to plot the chart 
       var name = "Mon,Tue,Wed,Thur,Fri,Sat,Sun".Split(',');
       var cals = new[] { 120, 110, 90, 170, 130, 90, 120 };
       var carbs = new[] { 150, 200, 175, 190, 140, 160, 210 };
       var fats = new[] { 60, 75, 50, 55, 62, 62, 58 };
       //array with weight under 150 lbs:
       // var weight = new[] { 149.0, 149.5, 148.7, 148.1, 147.2, 147.8, 146.6 };
       //array with weight = 150 lbs:
       var weight = new[] { 149.0, 150.0, 148.7, 148.1, 147.2, 147.8, 146.6 };

       for (int i = 0; i < 7; i++)
       {
           DataPerDay tempData = new DataPerDay();
                tempData.Name = name[i];
                tempData.Cals = cals[i];
                tempData.Carbs = carbs[i];
                tempData.Fats = fats[i];
                tempData.Weight = weight[i];

                //change series color if weight > goal weight
                if (tempData.Weight >= goalWeight)
                {
                    weightColor = Color.Red;
                }

                appData.Add(tempData);
            }
        }

        public class DataPerDay
        {
            string _name;
            double _cals, _carbs, _fats;
            double _weight;

            public string Name
            {
                get { return _name; }

                set { _name = value; }

            }

            public double Cals
            {
                get { return _cals; }

                set { _cals = value; }

            }

            public double Carbs
            {
                get { return _carbs; }

                set { _carbs = value; }

            }
            public double Fats
            {

                get { return _fats; }

                set { _fats = value; }

            }

            public double Weight
            {
                get { return _weight; }

                set { _weight = value; }
            }
        }
    }

Step 2: Add a FlexChart control

Complete the following steps to initialize the FlexChart control in XAML and set the conditions to change the color of the line chart if weight is above 150 lbs.

In XAML

1. Add a new Forms XAML Page (for example WeightMonitor.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.WeightMonitor" xmlns:xuni="clr-namespace:Xuni.Forms.FlexChart;assembly=Xuni.Forms.FlexChart">

2. 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.
   Add four series to the FlexChart. Three column chart series that represent the consumed calories, carbohydrates and fats and a line chart series to represent the weight lost or gained.

   XAML

   Copy Code

   <StackLayout> <xuni:FlexChart x:Name="chart" ItemsSource="{Binding Data}" BindingX="Name" Grid.Row="1" Grid.ColumnSpan="2" HeaderText="Weight Monitor" HeaderFont="20"> <xuni:FlexChart.Series> <xuni:ChartSeries Name="x10 (Cals)" Binding="Cals" ChartType="Column" Color="#FF80FF"> </xuni:ChartSeries> <xuni:ChartSeries Name="Carbs (g)" Binding="Carbs" ChartType="Column" Color="#6BD2DB"> </xuni:ChartSeries> <xuni:ChartSeries Name="Fats (g)" Binding="Fats" ChartType="Column" Color="#B2B2F9"> </xuni:ChartSeries> <xuni:ChartSeries x:Name="series4" Name="Weight (lbs)" Binding="Weight" ChartType="Line" Color="Green"> </xuni:ChartSeries> </xuni:FlexChart.Series> </xuni:FlexChart> </StackLayout>

3. In the Solution Explorer, expand the WeightMonitor.xaml node and double click WeightMonitor.xaml.cs to open the form's C# code behind.
4. In the class constructor, set the BindingContext for the FlexChart and set the color of the line chart series and the footer text which is displayed incase the goalWeight is equal to or greater than 150 lbs.
5. The following code shows what the WeightMonitor class constructor looks like after completing the steps above.

   C#

   Copy Code

   public WeightMonitor() { InitializeComponent(); chart.BindingContext = new WMDataSource(); chart.Legend.LabelFont = Font.SystemFontOfSize(20); WMDataSource temp = new WMDataSource(); //Set Line color series4.Color = temp.weightColor; //Display alert if (series4.Color == Color.Red) { series4.BorderWidth = 3; chart.HeaderText = "Your Goal is to keep your weight under 150 lbs"; chart.HeaderFont = Font.SystemFontOfSize(25); chart.HeaderTextColor = Color.Teal; } }

Step 3: Run the Project

1. In the Solution Explorer, double click App.cs to open it.
2. In the class constructor App(), set the Forms XAML Page WeightMonitor as the MainPage. The following code shows the class constructor App(), after completing this step.

   C#	Copy Code
   public static Page GetMainPage() { return new NavigationPage(new WeightMonitor()); }

3. 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.Forms.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.Forms.FlexChart.Platform.WinPhone.FlexChartRenderer.Init();

4. Press F5 to run the project.

Copyright © GrapeCity, inc. All rights reserved.