Version

Data Binding

This topic demonstrates how to bind data to the UltraFunnelChart™ control. Code examples and screenshots are provided throughout the topic.

Overview

Introduction

The procedure demonstrated in this topic shows how to bind the UltraFunnelChart control to a data collection. You will define a data collection, add the Funnel Chart control to your application, and then bind the control’s to an instance of the data collection.

Required References

  • Infragistics.Win.DataVisualization.UltraDataChart.dll

  • Infragistics.Win.DataVisualization.Shared.dll

  • Infragistics.Portable.Core.dll

Required Namespaces

In the procedure below, FunnelChart_Demo is the namespace in which the data model is defined. The following using statement is required in the FunnelChart_Demo or the class that contains the data model:

In C#:

using System.Collections.ObjectModel;

In Visual Basic:

Imports System.Collections.ObjectModel

Data Requirements

While the chart control allows you to easily point it to your own data model, it is important that you are supplying the appropriate amount and type of data that the chart requires. If the data does not meet the minimum requirements based on the type of chart that you are using, an error will be generated.

The following is a list of data requirements for funnel chart:

  • The data model must contain one numeric column.

  • The data model may contain an optional string column for legend labels.

Data Rendering Rules

The chart data is rendered using the following rules:

  • Axes will not be rendered since the funnel chart does not use axes.

  • Each row constitutes a single colored section of the funnel.

  • The data values do not need to be percentages, as the sum of the data values in the column is used to calculate the percentage applicable to each row.

  • The string column that is mapped to the label property of the data mapping is used as labels in the legend.

  • Only the first series in the series collection will be rendered.

Steps Overview

  1. Defining a Data Model

  2. Adding an Instance of the Funnel Chart control

  3. (Optional) Verifying the result

Steps

  1. Define a Data Model.

Create a class to model the data. The following code creates the TestDataItem class representing simple value-label pairs, as well as a TestData class representing a collection of those pairs:

In Visual Basic:

Public Class TestData
    Inherits ObservableCollection(Of TestDataItem)
    Public Sub New()
    Dim slice1 As New TestDataItem()
    slice1.Label = "Impressions"
    slice1.Value = 3000
    Add(slice1)
    Dim slice2 As New TestDataItem()
    slice2.Label = "Clicks"
    slice2.Value = 2000
    Add(slice2)
    Dim slice3 As New TestDataItem()
    slice3.Label = "Free Downloads"
    slice3.Value = 1000
    Add(slice3)
    Dim slice4 As New TestDataItem()
    slice4.Label = "Purchase"
    slice4.Value = 3000
    Add(slice4)
    Dim slice5 As New TestDataItem()
    slice5.Label = "Repeat Purchase"
    slice5.Value = 500
    Add(slice5)
End Sub
End Class
Public Class TestDataItem
    Public Property Label() As String
        Get
            Return m_Label
        End Get
        Set
            m_Label = Value
        End Set
    End Property
    Private m_Label As String
    Public Property Value() As Double
        Get
            Return m_Value
        End Get
        Set
            m_Value = Value
        End Set
    End Property
    Private m_Value As Double
End Class

In C#:

public class TestData : ObservableCollection<TestDataItem> {
        public TestData() {
            Add(new TestDataItem() {
                Label = "Impressions",
                Value = 3000
            });
            Add(new TestDataItem() {
                Label = "Clicks",
                Value = 2000
            });
            Add(new TestDataItem() {
                Label = "Free Downloads",
                Value = 1000
            });
            Add(new TestDataItem() {
                Label = "Purchase",
                Value = 3000
            });
            Add(new TestDataItem() {
                Label = "Repeat Purchase",
                Value = 500
            });
        }
    }
    public class TestDataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }
  1. Add an instance of the UltraFunnelChart Control.

In Visual Basic:

Me.funnel = New Infragistics.Win.DataVisualization.UltraFunnelChart()
Me.funnel.DataSource = New TestData()
Me.funnel.ValueMemberPath = "Value"
Me.funnel.InnerLabelMemberPath = "Value"
Me.funnel.InnerLabelVisibility = Infragistics.Portable.Components.UI.Visibility.Visible
Me.funnel.OuterLabelMemberPath = "Label"
Me.funnel.OuterLabelVisibility = Infragistics.Portable.Components.UI.Visibility.Visible
Me.funnel.UseOuterLabelsForLegend = True
Me.funnel.UseUnselectedStyle = True
Me.funnel.AllowSliceSelection = True
Me.funnel.TransitionDuration = 1

In C#:

this.funnel = new Infragistics.Win.DataVisualization.UltraFunnelChart();
this.funnel.DataSource = new TestData();
this.funnel.ValueMemberPath = "Value";
this.funnel.InnerLabelMemberPath = "Value";
this.funnel.InnerLabelVisibility = Infragistics.Portable.Components.UI.Visibility.Visible;
this.funnel.OuterLabelMemberPath = "Label";
this.funnel.OuterLabelVisibility = Infragistics.Portable.Components.UI.Visibility.Visible;
this.funnel.UseOuterLabelsForLegend = true;
this.funnel.UseUnselectedStyle = true;
this.funnel.AllowSliceSelection = true;
this.funnel.TransitionDuration = 1;
  1. (Optional) Verify the Result.

Run your application to verify the result. If you have successfully bound the Funnel Chart control to the data collection, the chart will look like the one shown here:

xamFunnelChart DataBind Xamarin 01.png