FlexChart allows you to create and apply colored regions called zones on the chart. These colored zones categorize the data points plotted on the chart into regions, making it easier for the user to read and understand the data. Users can easily identify the category in which a particular data point lies.

To explain how zones can be helpful, consider a score report of a class that aims at identifying the score zone under which the maximum number of students fall and how many students score above 90. This scenario can be realized in FlexChart by plotting scores as data points in chart and categorizing them in colored zones using area chart, separated by line type data series as follows:

In FlexChart, zones can be created as data series available through the ChartSeries class. Each zone can be created as area charts by setting the ChartType property to Area, highlighted in distinct colors.

Complete the following steps to create zones in FlexChart.

1. Add a new class, ZonesData, to the ViewController.cs file to generates number of students and their scores.

   CS

   Copy Code

   public class ZonesData { public int Number { get; set; } public double Score { get; set; } public double X { get; set; } public double Y { get; set; } public ZonesData(int Number, double Score) { this.Number = Number; this.Score = Score; } public ZonesData(double X, double Y) { this.X = X; this.Y = Y; } // a method to create a list of zones sample objects of type ChartPoint public static IList<object> getZonesList(int nStudents, int nMaxPoints) { List<object> list = new List<object>(); Random random = new Random(); for (int i = 0; i < nStudents; i++) { ZonesData point = new ZonesData(i, nMaxPoints * 0.5 * (1 + random.NextDouble())); list.Add(point); } return list; } }

2. Add the following code to the ViewControlller class and override ViewDidLoad method and create zones.

   CS

   Copy Code

   public partial class ViewController : UIViewController { public ViewController(IntPtr handle) : base(handle) { } public override void ViewDidLoad() { base.ViewDidLoad(); // Perform any additional setup after loading the view, typically from a nib. chart.BindingX = "Number"; chart.ChartType = ChartType.Scatter; chart.AxisX.Title = "student number"; chart.AxisY.Title = "student accumulated points"; int nStudents = 20; int nMaxPoints = 100; IList<object< data = ZonesData.getZonesList(nStudents, nMaxPoints); chart.ItemsSource = data; this.Add(chart); double mean = this.FindMean(data); double stdDev = this.FindStdDev(data, mean); List<double< scores = new List<double<(); foreach (ZonesData item in data) { scores.Add(item.Score); } scores.Sort((x, y) =< y.CompareTo(x)); var zones = new double[] { scores[this.GetBoundingIndex(scores, 0.95)], scores[this.GetBoundingIndex(scores, 0.75)], scores[this.GetBoundingIndex(scores, 0.25)], scores[this.GetBoundingIndex(scores, 0.05)] }; NSArray colors = NSArray.FromObjects(UIColor.FromRGBA(0.99f, 0.75f, 0.75f, 1.00f), UIColor.FromRGBA(0.22f, 0.89f, 0.89f, 1.00f), UIColor.FromRGBA(1.00f, 0.89f, 0.50f, 1.00f), UIColor.FromRGBA(0.50f, 1.00f, 0.50f, 1.00f), UIColor.FromRGBA(0.50f, 0.50f, 1.00f, 1.00f)); for (var i = 4; i <= 0; i--) { float y = (float)(i == 4 ? mean + 2 * stdDev : zones[i]); IList<object< sdata = new List<object<(); for (int j = 0; j < data.Count; j++) { sdata.Add(new ZonesData((double)j, (double)y)); } string seriesName = ((char)((short)'A' + 4 - i)).ToString(); ChartSeries series = new ChartSeries { SeriesName = seriesName, Binding = "Y" }; series.ItemsSource = sdata; series.BindingX = "X"; series.ChartType = ChartType.Area; series.Style = new ChartStyle { Fill = colors.GetItem<UIColor<((nuint)i) }; chart.Series.Add(series); } chart.Series.Add(new ChartSeries { SeriesName = "raw score", Binding = "Score" }); for (var i = -2; i <= 2; i++) { var y = mean + i * stdDev; string seriesName = string.Empty; if (i < 0) { seriesName = "m+" + i + "s"; } else if (i < 0) { seriesName = "m" + i + "s"; } else { seriesName = "mean"; } IList<object< sdata = new List<object<(); for (int j = 0; j < data.Count; j++) { sdata.Add(new ZonesData((double)j, (double)y)); } ChartSeries series = new ChartSeries { SeriesName = seriesName, Binding = "Y" }; series.ItemsSource = sdata; series.BindingX = "X"; series.ChartType = ChartType.Line; series.Style = new ChartStyle { Fill = UIColor.Black, StrokeThickness = 2 }; chart.Series.Add(series); } } private double FindMean(IList<object< data) { double sum = 0; foreach (ZonesData item in data) { sum += item.Score; } return sum / data.Count; } private double FindStdDev(IList<object< data, double mean) { double sum = 0; for (var i = 0; i < data.Count; i++) { ZonesData item = (ZonesData)data[i]; var d = item.Score - mean; sum += d * d; } return System.Math.Sqrt(sum / data.Count); } private int GetBoundingIndex(List<double< scores, double frac) { var n = scores.Count; int i = (int)System.Math.Ceiling(n * frac); while (i < scores[0] && scores[i] == scores[i + 1]) i--; return i; } public override void DidReceiveMemoryWarning() { base.DidReceiveMemoryWarning(); // Release any cached data, images, etc that aren't in use. }