How to Add Zones to your FlexChart

For Xuni 2016 v3, we introduced the ability to add colored zones to your chart. These colored bands make it easier to identify which category a point falls into, and gives a clear means for labeling the category. In this article we’ll walk through how the zones feature works. For this example, we’ll use the results of a customer satisfaction survey to calculate NPS), which classifies customers into promoters, passives, and detractors based on their survey responses. These different customer categories demonstrate how you can apply zones in your chart.

How Zones work

Before we get into the actual steps for creating this sample, we’ll examine some of the different pieces that constitute the sample. You’ll notice that there are both categories (which are represented as shaded areas) as well as line thresholds separating them. These are actually composed of different types of charts. The zones are effectively area charts, and the thresholds are line charts that are drawn over top. The order each chart series is added will make a difference in how the overall chart is displayed. The area charts should be added from outermost to innermost, and the line threshold after. For this case we’ll add them in the order of Promoter, Passive, Detractor, followed by the thresholds, and finally the Satisfaction results.

Detailed Steps

Step 1: Create a class for Survey Result Data 1. In the Solution Explorer, right-click your project name (Portable app). 2. Select Add | New Item. The Add New Item dialog appears. 3. Choose Class from the dialog and provide a name to it, for example SurverResult. 4. Click Add to add the class to your project. 5. Add the following code to the SurveyResult class.

public class SurveyResult  
{  
public int surveyNumber { get; set; }  
public int satisfaction { get; set; }  

public SurveyResult(int surveyNumber, int satisfaction)  
{  
this.surveyNumber = surveyNumber;  
this.satisfaction = satisfaction;  
}  
}  

Step 2: Initialize a FlexChart control in XAML 1. Right-click your project in the Solution Explorer and select Add | New Item. The Add New Item dialog appears. 2. Select Forms Xaml Page from the installed templates and provide a name to it, for example, SurveyZonesPage. 3. Click Add to add the page to your project. 4. Initialize the FlexChart control in the SurveyZonesPage.xaml page by adding the following XAML code.

<?xml version="1.0" encoding="utf-8"?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"   
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
xmlns:local="clr-namespace:SurveyZones"  
xmlns:xuni="clr-namespace:Xuni.Forms.FlexChart;assembly=Xuni.Forms.FlexChart"  
x:Class="SurveyZones.SurveyZonesPage"  
Padding="15">  
<StackLayout>  
<Label x:Name="lbl" HorizontalOptions="Center" Font="Large"/>  
<Grid VerticalOptions="FillAndExpand" >  
<xuni:FlexChart x:Name="chart" BindingX="surveyNumber" VerticalOptions="FillAndExpand" ChartType="Scatter" Grid.Row="0">  
<xuni:FlexChart.AxisX>  
<xuni:ChartAxis AxisLineVisible="false" MajorGridVisible="false" TitleText="Survey Number" />  
</xuni:FlexChart.AxisX>  
<xuni:FlexChart.AxisY>  
<xuni:ChartAxis TitleText="Satisfaction Score" Max="10"/>  
</xuni:FlexChart.AxisY>  
</xuni:FlexChart>  
</Grid>  
</StackLayout>  
</ContentPage>  

Step 3: Bind Data and create Zones 1. In the Solution Explorer, expand the SurveyZonesPages.xaml node and open the SurveyZonesPage.xaml.cs to open the C# code behind. 2. In the SurveyZonesPage() class constructor, create your zones as illustrated below:

using System.Collections.ObjectModel;  
using Xamarin.Forms;  
using System;  

namespace SurveyZones  
{  
public partial class SurveyZonesPage : ContentPage  
{  
public SurveyZonesPage()  
{  
InitializeComponent();  
//customer survey results  
int[] scores = { 8, 9, 9, 10, 3, 10, 6, 10, 7, 9 };  

ObservableCollection<SurveyResult> results = new ObservableCollection<SurveyResult>();  

chart.ItemsSource = results;  

Point[] zone1 = new Point[10];  
Point[] zone2 = new Point[10];  
Point[] zone3 = new Point[10]; ;  

Point[] threshold1 = new Point[10];  
Point[] threshold2 = new Point[10];  

//populate points for zones and thresholds  
for (int i = 0; i < 10; i++)  
{  
results.Add(new SurveyResult(i, scores[i]));  
zone1[i] = new Point(i, 10);  
zone2[i] = new Point(i, 9);  
zone3[i] = new Point(i, 7);  
threshold1[i] = new Point(i, 9);  
threshold2[i] = new Point(i, 7);  
}  

//Zone 1 for promoters  
var seriesZone1 = new Xuni.Forms.FlexChart.ChartSeries();  
seriesZone1.ItemsSource = zone1;  
seriesZone1.Binding = "Y";  
seriesZone1.BindingX = "X";  
seriesZone1.ChartType = Xuni.Forms.FlexChart.ChartType.Area;  
seriesZone1.Color = Color.Green;  
seriesZone1.Name = "Promoter";  
//Zone 2 for passives  
var seriesZone2 = new Xuni.Forms.FlexChart.ChartSeries();  
seriesZone2.ItemsSource = zone2;  
seriesZone2.Binding = "Y";  
seriesZone2.BindingX = "X";  
seriesZone2.ChartType = Xuni.Forms.FlexChart.ChartType.Area;  
seriesZone2.Color = Color.Yellow;  
seriesZone2.Name = "Passive";  
//Zone 3 for detractors  
var seriesZone3 = new Xuni.Forms.FlexChart.ChartSeries();  
seriesZone3.ItemsSource = zone3;  
seriesZone3.Binding = "Y";  
seriesZone3.BindingX = "X";  
seriesZone3.ChartType = Xuni.Forms.FlexChart.ChartType.Area;  
seriesZone3.Color = Color.Red;  
seriesZone3.Name = "Detractor";  

chart.Series.Add(seriesZone1);  
chart.Series.Add(seriesZone2);  
chart.Series.Add(seriesZone3);  

//Promotor Threshold line  
var seriesThreshold1 = new Xuni.Forms.FlexChart.ChartSeries();  
seriesThreshold1.ItemsSource = threshold1;  
seriesThreshold1.Binding = "Y";  
seriesThreshold1.BindingX = "X";  
seriesThreshold1.Name = "Promoter Threshold";  
seriesThreshold1.ChartType = Xuni.Forms.FlexChart.ChartType.Line;  
seriesThreshold1.Color = Color.Olive;  

//Passive Threshold line  
var seriesThreshold2 = new Xuni.Forms.FlexChart.ChartSeries();  
seriesThreshold2.ItemsSource = threshold2;  
seriesThreshold2.Binding = "Y";  
seriesThreshold2.BindingX = "X";  
seriesThreshold2.Name = "Passive Threshold";  
seriesThreshold2.ChartType = Xuni.Forms.FlexChart.ChartType.Line;  
seriesThreshold2.Color = Color.Maroon;  

chart.Series.Add(seriesThreshold1);  
chart.Series.Add(seriesThreshold2);  

//add customer satisfaction results  
var satisfactioSeries = new Xuni.Forms.FlexChart.ChartSeries(chart, "Satisfaction", "satisfaction");  
satisfactioSeries.Color = Color.Black;  

chart.Series.Add(satisfactioSeries);  


lbl.Text = "NPS Score " + GetNPS(scores).ToString();  
}  
...  

Step 4 Calculate NPS The final code you need to add is a method for calculating NPS. Promotors are defined as satisfaction results greater than or equal to 9, Passives are greater than or equal to 7, and Passives are less than 7. The formula for calculating NPS is: NPS = (Promotors - Detractors) / Number of Survey results The method then needs to determine the number of Promotors, Detractors, and then calculate the NPS.

public double GetNPS(int[] scores)  
{  
double promoter = 0;  
double detractor = 0;  
foreach (int score in scores)  
{  
if (score >= 9)  
{  
promoter++;  
}  
else if (score < 7)  
{  
detractor++;  
}  
}  
double nps = ((promoter - detractor) / scores.Length) * 100;  
return nps;  
}  

Wrap up

Zones give you a new way to illustrate and call attention to the data in your chart. By placing your data into zones, it can be easier to tell at a glance what category a point falls into, and thus make better charts for your applications.

Read more about FlexChart >>