Version

Getting Started with XamFunnelChart

The purpose of this topic is to demonstrate how to configure and use the various key features and functionalities of the XamFunnelChart™ control.

Using XamFunnelChart

This section contains important conceptual and task-based information that will help you identify the features and show the usage with examples.

Required background

You need to first read the following topic:

Control Configuration Overview

Control configuration chart

The table below lists the configurable elements and behaviors of the XamFunnelChart control.

Configurable elements and behavior Configuration details Configuration properties

Slice Selection

Describes how to enable the slice selection, and also specify the display format of the slices.

Invert Slices

Demonstrates how to invert the slices, which represent the sections of the data, vertically.

Display the Labels

To display the Labels, InnerLabelMemberPath and OuterLabelMemberPath should be set to the target property.

Display the Legend

Displaying the legend requires creating an instance of an ItemLegend and setting it on the legend property of the funnel chart control.

Use Bezier Curve

Using Bezier curves gives the funnel chart a smooth-line appearance

Slice selection

Slice Selection property settings

The table below maps the desired configurations/behaviors to the corresponding property settings.

In order to… Use this property: And set it to…

Enable Slice Selection

True

Specify the display format of the slices

Uniform

Weighted

Slice Selection code example

In order to enable slice selection the AllowSliceSelection property must be set to true.

In C#:

funnel.AllowSliceSelection = true;

In XAML:

<ig:XamFunnelChart AllowSliceSelection="True"/>

The XamFunnelChart control exposes two display format types:

  1. Uniform where all slices have the same height (default).

  2. Weighted where the heights of the slices are based on the calculated percentage value of the underlying data.

In C#:

funnel.FunnelSliceDisplay = FunnelSliceDisplay.Uniform;

In XAML:

<ig:XamFunnelChart FunnelSliceDisplay="Uniform" />
xamFunnelChart UsingFunnelChart Xamarin 01.png

Figure 1: FunnelChart Display format

Invert Slices

Invert Slices property settings

The table below maps the desired configurations/behaviors to the corresponding property settings.

In order to… Use this property: And set it to…

Invert Slices

True

Invert Slices code example

In order to invert the slices on the control the IsInverted property must be set to true (default is false) Inverting the slices can also be triggered by a button click.

In C#:

funnel.IsInverted = true;

In XAML:

<ig:XamFunnelChart IsInverted="True"/>

Display the Labels

Display the Labels property settings

The table below maps the desired configurations/behaviors to the corresponding property settings.

In order to… Use this property: And set it to…

Display the Labels

Display the Labels code example

Displaying the labels is involved with setting the visibility first, and then specifying the path with the appropriate target.

In C#:

funnel.InnerLabelVisibility = Infragistics.Core.Visibility.Visible;
funnel.OuterLabelVisibility = Infragistics.Core.Visibility.Visible;
funnel.InnerLabelMemberPath = "Value";
funnel.OuterLabelMemberPath = "Label";

In XAML:

<ig:XamFunnelChart
     InnerLabelVisibility="Visible"
     OuterLabelVisibility="Visible"
     InnerLabelMemberPath="Value"
     OuterLabelMemberPath="Label"/>

Display the Legend

Display the Legend property settings

The table below maps the desired configurations/behaviors to the corresponding property settings.

In order to… Use this property: And set it to…

Display the Legend

Legend = [Element name of the ItemLegend instance]

True

Display the Legend code example

Displaying the legend requires you to create an instance of ItemLegend and then set the Legend property of the funnel chart control to the element name of the ItemLegend instance.

In XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ig:ItemLegend x:Name="Legend" Grid.Row="1"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="StartAndExpand" />
    <ig:XamFunnelChart x:Name="funnel" Grid.Row="0"
                       ItemsSource="{Binding}"
                       ValueMemberPath="Value"
                       UseOuterLabelsForLegend="True"
                       InnerLabelMemberPath="Value"
                       OuterLabelMemberPath="Label"
                       OuterLabelVisibility="Collapsed"
                       Legend="{x:Reference Legend}">
        </ig:XamFunnelChart>
    </Grid>
xamFunnelChart UsingFunnelChart Xamarin 02.png

Figure 2: FunnelChart Legend

Use Bezier Curve

Use Bezier Curve property settings

The table below maps the desired configurations/behaviors to the corresponding property settings.

In order to… Use this property: And set it to…

Use Bezier Curve

True

Use Bezier code example

The idea of using the Bezier curve is to give smooth-line appearance to the funnel chart control. The XamFunnelChart exposes two properties of type Point for Bezier curve settings. When the control is set up to use the Bezier curve, the lines on both sides of the funnel will use the control points to move towards the control points forming the curves. For more information see Bezier Curve.

UpperBezierControlPoint and LoweBezierControlPoint properties take X/Y coordinates as the control points in the Bezier curve. The following code example shows the property settings and the result is in the accompanying screenshot.

In XAML:

<ig:XamFunnelChart
     UseBezierCurve="True"
     UpperBezierControlPoint="0.25, 0.25"
     LowerBezierControlPoint="0.7, 0.4" />
xamFunnelChart UsingFunnelChart Xamarin 03.png

Figure 3: FunnelChart using Bezier curve

Data Binding demonstrates how to bind to the funnel Chart.

API Overview contains the list of namespaces and several key classes to know while programming with the control.