ComponentOne WPF Edition
FlexChart / Understanding FlexChart / FlexChart Fundamentals / Zones
In This Topic
Zones
In This Topic

FlexChart lets you to create and apply colored regions called chart zones. The colored zones categorize the plotted data on the chart into regions, which makes it easier for the user to read and understand the data. This helps the users to easily identify the category in which a particular data point lies.

To explain how creating zones can be helpful, consider a customer satisfaction survey that aims at identifying whether a customer is a promoter, a passive customer, or a detractor for a specific product. The responses recorded in the survey can be used to calculate NPS (Net Promoter Score) that classifies customers into promoters, passives, and detractors. This scenario can be realized in FlexChart by plotting customer responses as data points in chart and categorizing them in colored zones using area chart as showcased in the following image:

WPF FlexChart zones in chart

Creating Zones in FlexChart

In FlexChart, zones can be created as data series available through the Series class. Each zone can be created as area charts by setting the ChartType property to Area, highlighted in distinct colors. To distinguish each zone, line type data series can be created as thresholds in the chart.

Complete the following steps to create zones in FlexChart.

  1. In XAML view, add the FlexChart control, set its name and header and then add a new series.
    XAML
    Copy Code 
    <c1:FlexChart x:Name="flexChart" Header="FlexChart Zones" BindingX="surveyNumber" ChartType="Scatter">
    <c1:Series  SeriesName = "Satisfaction" Binding = "satisfaction"/>
</c1:FlexChart>

  2. Switch to the code view and create a custom class called SurveyResult to record the survey result data.
    C#
    Copy Code 
    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;
    }
}

  3. Create a custom class called Zone for creating zones in FlexChart.
    C#
    Copy Code 
    public class Zone
{
    public string Name { get; set; }
    public double Value { get; set; }
    public Color Fill { get; set; }
}

  4. Create the instances of the SurveyResult and Zone classes using the following code.
    C#
    Copy Code 
    ObservableCollection<SurveyResult> results;
ObservableCollection<Zone> zones;

  5. Initialize new instances of ObservableCollection SurveyResult and Zone classes.
    C#
    Copy Code 
    results = new ObservableCollection<SurveyResult>();
zones = new ObservableCollection<Zone>();

  6. Add data source to the FlexChart control.
    C#
    Copy Code 
    int[] scores = { 8, 9, 9, 10, 3, 10, 6, 10, 7, 9 };
for (int i = 0; i < 10; i++)
{
    results.Add(new SurveyResult(i, scores[i]));
}
this.flexChart.ItemsSource = results;

zones.Add(new Zone() { Value = 7, Name = "Low", Fill = Colors.Red });
zones.Add(new Zone() { Value = 9, Name = "Medium", Fill = Colors.Yellow });
zones.Add(new Zone() { Value = 10, Name = "High", Fill = Colors.Green });

  7. Add zones to legend.
    C#
    Copy Code 
    //Add zones to legend
for (int i = 0; i < zones.Count; i++)
{
    var series = new Series();
    series.ChartType = ChartType.Area;
    var chartStyle = new ChartStyle()
    {
        Fill = new SolidColorBrush(zones[i].Fill),
        Stroke = new SolidColorBrush(Colors.Transparent),
    };
    series.Style = chartStyle;
    series.SeriesName = zones[i].Name;
    this.flexChart.Series.Add(series);
}
this.flexChart.LegendPosition = Position.Right;
this.flexChart.Rendering += flexChart_Rendering;

  8. Handle the Rendering event named flexChart_Rendering event to draw the zones in FlexChart. You can use the Rendered event to draw additional elements like lines, rectangles, polygons, ellipses, strings and images apart from basic elements like Title, Series, Axes, Data Labels, Legend, Plot Area, etc.
    C#
    Copy Code 
    private void flexChart_Rendering(object sender, RenderEventArgs e)
{
    var chart = sender as FlexChart;
    for (int i = 0; i < zones.Count; i++)
    {
        //Get Min/Max range from FlexChart
        var minY = i == 0 ? ((IAxis)flexChart.AxisY).GetMin() : zones[i - 1].Value;
        var maxY = i == zones.Count - 1 ? ((IAxis)flexChart.AxisY).GetMax() : zones[i].Value;
        var minX = ((IAxis)flexChart.AxisX).GetMin();
        var maxX = ((IAxis)flexChart.AxisX).GetMax();
        var pt1 = chart.DataToPoint(new Point((float)minX, (float)minY));
        var pt2 = chart.DataToPoint(new Point((float)maxX, (float)maxY));
        //Draw Zone Rectangle.
        e.Engine.SetFill(new SolidColorBrush(zones[i].Fill));
        e.Engine.SetStroke(new SolidColorBrush(Colors.Transparent));
        e.Engine.DrawRect(pt1.X, pt2.Y, Math.Abs(pt2.X - pt1.X), Math.Abs(pt2.Y - pt1.Y));
    }
}