Blog

Introducing the XamFunnelChart

Damyan Petev / Tuesday, November 8, 2011

The XamFunnelChart™ is a new control in 11.2 and as with other newly introduced controls following our Unified XAML strategy – they are Cross-platform and this one is no exception. It will be available in NetAdvantage® for Silverlight and WPF both Line Of Business and Data Visualization packages as well as NetAdvantage for Windows Phone.

The XamFunnelChart can display a single series of data as progressively decreasing proportions in the form of a funnel. The funnel can have any number of sections ( or also referred as slices ) each of which representing a percentage of the whole. A classical example of  a funnel chart is orders fulfilment starting with the total of initiated orders on top or even the awareness of the customers or how many have clicked an advertisement and finishing with the actual deliveries to satisfied customers. What the goal of such chart would be is to make easy spotting a major ‘fallout’ at some stage of a process that starts at 100% and ends at lower or illustrate where the biggest bottlenecks are in that process. Here’s a visual example showing the expenses for each phase:

Displaying in the default top-down style, using outside labels and with bottom edge set at half the size of the top one.

The chart is inverted, the outside labels have been replaced with a legend and the bottom edge (now on top) has been reduced in size to make the chart a bit more narrow.

Now that you have an idea what the XamFunnelChart can do let’s see how to use it.

Getting Started

As always it starts with adding the required references which include the base assembly for the platform (e.g InfragisticsSL4.DataVisualization.v11.2.dll or just InfragisticsSL4.v11.2.dll in NetAdvantage for Silverlight) and the one for the chart (e.g. InfragisticsWP7.Controls.Charts.XamDataChart.v11.2.dll ) and of cource the infragistics namespace:

  1. xmlns:ig="http://schemas.infragistics.com/xaml"

Once that is done you might consider the data to be visualized. The chart is easy enough to use with data models of you choosing but it does have requirements that need to be met otherwise an error will be generated:

  • First and foremost the very minimum is that the data model must contain one numeric column – these are the values for each slice.
  • The data model may contain an optional string column for legend and labels.

The funnel chart doesn’t use axes so there are not in the list of requirements. And if there are more than one series just the first one will be rendered. There’s also no need to include percentages in the model as the XamFunnelChart will take the sum of all values and calculate the each row’s part for you. The strings for inner or outer labels are also shared as legend labels. Here’s an example data using a simple value-label pairs:

  1. public class ExampleItem
  2. {
  3.     public string Label { get; set; }
  4.     public double Value { get; set; }
  5. }
  6. public class TestData : ObservableCollection<ExampleItem>
  7. {
  8.     public TestData()
  9.     {
  10.         ExampleItem slice1 = new ExampleItem();
  11.         slice1.Label = "Marketing";
  12.         slice1.Value = 45000;
  13.         Add(slice1);
  14.         ExampleItem slice2 = new ExampleItem();
  15.         slice2.Label = "Retail";
  16.         slice2.Value = 22000;
  17.         Add(slice2);
  18.         ExampleItem slice3 = new ExampleItem();
  19.         slice3.Label = "Manufacturing";
  20.         slice3.Value = 76000;
  21.         Add(slice3);
  22.         ExampleItem slice4 = new ExampleItem();
  23.         slice4.Label = "Shipping";
  24.         slice4.Value = 33500;
  25.         Add(slice4);
  26.         ExampleItem slice5 = new ExampleItem();
  27.         slice5.Label = "Research & Design";
  28.         slice5.Value = 88000;
  29.         Add(slice5);
  30.     }
  31. }

And adding that to the resources in XAML:

  1. <UserControl
  2.     ...
  3.     xmlns:local="clr-namespace:FunnelChartDemo"
  4.     ...>
  5.     <UserControl.Resources>
  6.             <local:TestData x:Key="data"></local:TestData>
  7.         </ResourceDictionary>
  8.     </UserControl.Resources>
  9.     ...

Adding the control next and it includes a few required properties to set:

  • The ItemSource , which will be bound to an instance of the data collection in this example
  • ValueMemberPath property holds the path to the data series with numeric values

The other basic properties include OuterLabelMemberPath and InnerLabelMemberPath which obviously hold the path to the labels in the collection and the Boolean UseOuterLabelsForLegend that based on it’s value will alternate between outer and inner labels for the legend.

FunnelSliceDisplay in an option if the chart should use ‘Uniform’ style to display slices which is basically each slice row having the same height as the others, or using ‘Weighted’ style to calculate each row’s height based on its part in the total:

  1. <ig:XamFunnelChart ItemsSource="{StaticResource data}"
  2.                            x:Name="funnelChart"
  3.                            ValueMemberPath="Value"                   
  4.                            InnerLabelMemberPath="Value"
  5.                            FunnelSliceDisplay="Weighted"
  6.                            OuterLabelMemberPath="Label"
  7.                            OuterLabelVisibility="Visible"
  8.                            Legend="{Binding ElementName=Legend}"/>
  9.          <!--Adding the legend -->
  10.         <ig:ItemLegend x:Name="Legend" />

And the result of that would be something like this:

As it can be seen the chart can use both outside labels and legend also after a quick comparison with the ones above – this one is using the default styles and they are styled with our IG Theme. Of course you can define your own set of colours using the Brushes property.

Interaction

The XamFunnelChart can really come to life with it’s dependency properties – they will allow for truly engaging user interaction with the chart in runtime.

To start with it allows selection with setting the AllowSliceSelection to true. The control also fires a SliceClicked event and argument that provides an easy way to get information about the clicked slice. Let’s assume you would like to let the user pick slices to see their combined values, this can be done like so:

  1. private void funnelChart_SliceClicked(object sender, Infragistics.Controls.Charts.FunnelSliceClickedEventArgs args)
  2. {
  3.     //the sender object is the chart
  4.     XamFunnelChart chart = (XamFunnelChart)sender;
  5.     //and args supplies the Index and the Item itself
  6.     ExampleItem clickedSlice = (ExampleItem)args.Item;
  7.     /*if the clicked slice is in the selected collection it means it has just
  8.     been added and vise versa.*/
  9.     if (chart.SelectedItems.Contains(clickedSlice))
  10.     {
  11.         // using a TextBox named showValue to hold the sum
  12.         if (showValue.Text == string.Empty)
  13.         {
  14.             showValue.Text = clickedSlice.Value.ToString();
  15.         }
  16.         else
  17.         {
  18.             showValue.Text = (int.Parse(showValue.Text) + clickedSlice.Value).ToString();
  19.         }
  20.     }
  21.     else
  22.     {
  23.         showValue.Text = (int.Parse(showValue.Text) - clickedSlice.Value).ToString();
  24.     }
  25. }

The IsInverted property can be bound and changed in runtime to produce a rather dramatic animation. Speaking of animations the chart also has and entry animation and an TransitionDuration property that can be set to seconds or parts of a second, just keep in mind it’s a TimeSpan so use the format “00:00:01.00” if you don’t want to end up with one hour transition animation and keep in mind it also affects the entry – probably for normal use 3 seconds is the maximum.

Curves

Besides smooth animations the XamFunnelChart can also do smooth curves – for that it uses Bezier curves. A Bezier curve is a parametric curve that can scale indefinitely and is used to create very fluid and graceful curves. You can enable that feature on the chart and you can also provide two points as parameters for the curve referred as upper and lower:

  1. <ig:XamFunnelChart ItemsSource="{StaticResource data}"
  2.                    UseBezierCurve="True"
  3.                    UpperBezierControlPoint="0.1, 0.25"
  4.                    LowerBezierControlPoint="0.55, 0.5"
  5.                    ValueMemberPath="Value"/>

Using that you can create stunningly looking  charts simply let users set the points and observe the chart animate the transition between different settings. Here’s an example of what the chart can look like using Bezier curves:

Conclusion

The XamFunnelChart will display data in style, sort it and calculate percentages to scale each piece. You can manipulate its shape – start with a funnel , flip it, make it a pyramid or apply smooth curves to its sides and make it truly unique. Allow users to interact with the funnel chart and make changes to various setting in runtime while enjoying fluid animations and still being able effortlessly make conclusions based on the presented data.

A demo project demonstrating some of the main features can be found here.

Keep in mind assemblies from the 11.2 Release (can be trial) are required.