Version

Selection and Explosion

This topic demonstrates how to implement the explosion behavior of the XamPieChart™ control. At the end of the topic, a complete code sample is provided.

The topic is organized as follows:

Introduction

The XamPieChart control supports explosion of individual pie slices as well as a SliceClick event that allows you to modify selection states and implement custom logic.

Preview

piechart explosion.png

Figure 1: The XamPieChart control as implemented by the sample code

Requirements

This article assumes you have already read the Data Binding topic, and uses the code therein as a starting point.

Overview

  1. Configuring the respective properties and event handler

  2. Implementing the event handler

  3. (Optional) Verifying the result

Steps

  1. Configure the respective properties and event handler .

Taking code from the Data Binding topic as a starting point, enable explosion by setting the AllowSliceExplosion property to True and configure pieChart_SliceClick as the event handler for mouse clicks:

In XAML:

<ig:XamPieChart Name="pieChart"
                   AllowSliceExplosion="True"
                   SliceClick="pieChart_SliceClick" />

  1. Implement the event handler .

On SliceClick, toggle the explosion states of the slice.

In C#:

private void pieChart_SliceClick(object sender, Infragistics.XamarinForms.Controls.Charts.SliceClickEventArgs e)
{
   e.IsExploded = !e.IsExploded;
}

  1. (Optional) Verify the result .

To verify the result, run your application. The Pie Chart control will now respond to SliceClick events by selecting and exploding the appropriate slice outward. A list of currently selected slices will also be maintained in the upper left corner. (Figure 1, above)

Complete Code Sample

The following code listings contain the full example implemented in context.

View

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"
             x:Class="XamPieChart_SelectAndExplodeView">

<Grid>
    <ig:XamPieChart x:Name="pieChart"
                    LabelMemberPath="Label"
                    ValueMemberPath="Value"
                    AllowSliceExplosion="True"
                    LabelsPosition="BestFit"
                    ItemsSource="{Binding Data}"
                    SliceClick="pieChart_SliceClick">
    </ig:XamPieChart>
</Grid>

</ContentView>

Code-Behind

using Infragistics.XamarinForms.Controls.Charts;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace XamPieChart_SelectAndExplode
{
    public partial class Explosion : ContentView
    {
        public Data Data { get; set; }

        public Explosion()
        {
            InitializeComponent();
            Data = new Data();
            this.BindingContext = this;
        }

        private void pieChart_SliceClick(object sender, SliceClickEventArgs e)
        {
            e.IsExploded = !e.IsExploded;
        }
    }

    public class DataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

    public class Data : ObservableCollection<DataItem>
    {
        public Data()
        {
            Add(new DataItem { Label = "Administration", Value = 20 });
            Add(new DataItem { Label = "Sales", Value = 80 });
            Add(new DataItem { Label = "IT", Value = 30 });
            Add(new DataItem { Label = "Marketing", Value = 80 });
            Add(new DataItem { Label = "Development", Value = 40 });
            Add(new DataItem { Label = "Customer Support", Value = 60 });
        }
    }
}

Related Content