Configuring igFunnelChart

Topic Overview

Purpose

This topic explains how to configure the visual features and behavior of the igFunnelChart™ control.

Required background

The following topics are prerequisites to understanding this topic:

• igFunnelChart Overview: This topic provides conceptual information about the igFunnelChart control including its main features, minimum requirements, and user functionality.

• Adding igFunnelChart: This topic demonstrates how to add the igFunnelChart control to an HTML page and bind it to data.

In this topic

This topic contains the following sections:

• igFunnelChart Configuration Overview
  • igFunnelChart features summary
  • igFunnelChart configuration summary chart
  • igFunnelChart default configuration
  • Minimum requirements
• Code Examples
• Code Example: Configuring an Inverted Funnel Chart
• Code Example: Configuring Weighted Slices
• Code Example: Configuring a Bezier-Curve Funnel Chart
• Code Example: Enabling Slice Selection
• Related Content
  • Topics
  • Samples

igFunnelChart Configuration Overview

igFunnelChart features summary

The purpose of the igFunnelChart control is to display values for a set of categories representing some aspect (for example, total inventory for categories of products or population for age groups in a country).

The configurable aspects of the igFunnelChart control are:

• Funnel’s direction
• Slices’ weight
• Funnel’s shape
• Slice selection
• Label visibility
• Outer label alignment
• Tooltip look-and-feel
• Animation speed

Each of these aspects is explained in the configuration summary chart below.

igFunnelChart configuration summary chart

The following table lists the configurable aspects of the igFunnelChart control.

igFunnelChart default configuration

With its default settings, the igFunnelChart control renders a funnel chart with:

• items listed in descending order
• weighted slices (slices’ heights are proportional to their values)
• straight lines shape
• visible inline labels

and without:

• visible outline labels
• slice selection
• tooltips
• animation

The following picture demonstrates a funnel chart rendered with these default settings of the igFunnelChart control

Minimum requirements

For the chart to render properly, you need to configure the igFunnelChart control to have:

• a data source
• width
• height

Though it is not a technical requirement, for the chart to make sense to users, you need to define also:

• the value member
• the inner label
• the outer label

Code Examples Summary

The following table lists the code examples included in this topic.

Code Example: Configuring an Inverted Funnel Chart

Description

This code example shows how to configure an igFunnelChart control to display an inverted funnel. A normal funnel chart displays the largest slice at the top and the smallest at the bottom of the funnel while an Inverted funnel chart displays the smallest slice at the top and the largest at the bottom.

Code

Following is the code that implements this example.

In JavaScript:

$("#chartInverted").igFunnelChart({
    width: "325px",
    height: "450px",
    dataSource: data,
    valueMemberPath: "Budget",
    innerLabelMemberPath: "Budget",
    innerLabelVisibility: "visible",
    outerLabelMemberPath: "Department",
    outerLabelVisibility: "visible",
    isInverted: true
});

Code Example: Configuring Weighted Slices

Description

This code example shows how to configure an igFunnelChart control to render weighted slices. Normally funnel charts render with slices of equal height while Weighted slices render with different height depending on their value.

Code

Following is the code that implements this example.

In JavaScript:

$("#chartWeighted").igFunnelChart({
    width: "325px",
    height: "450px",
    dataSource: data,
    valueMemberPath: "Budget",
    innerLabelMemberPath: "Budget",
    innerLabelVisibility: "visible",
    outerLabelMemberPath: "Department",
    outerLabelVisibility: "visible",
    funnelSliceDisplay: "weighted"
});

Code Example: Configuring a Bezier-Curve Funnel Chart

Description

This code example shows how to configure an igFunnelChart control to use Bezier curve shape.

To enable the Bezier Curve feature, use the useBezierCurve option. The bezierPoints option configures the coordinates of the upper and lower Bezier control points, which determine the shape of the funnel chart. The string passed to the option must contain four numbers between 0 and 1 separated by a space. Define the x- and y-coordinates of the upper control point with the first and the second numbers, respectively and define the x- and y-coordinates of the lower control point with the third and the fourth numbers, respectively.

Code

Following is the code that implements this example.

In JavaScript:

$("#chartBezier").igFunnelChart({
    width: "325px",
    height: "450px",
    dataSource: data,
    valueMemberPath: "Budget",
    innerLabelMemberPath: "Budget",
    innerLabelVisibility: "visible",
    outerLabelMemberPath: "Department",
    outerLabelVisibility: "visible",
    useBezierCurve: true,
    bezierPoints: "0.1 0.1 0.7 1"
});

Code Example: Enabling Slice Selection

Description

This code example shows how to enable the slice selection feature of igFunnelChart and how to respond to “slice clicked” events. Enabling slice selection raises a sliceClicked event with every click on a slice.

Enable slice selection by setting the allowSliceSelection option to true. Set the useUnselectedStyle option to true in order to configure the control to change the appearance of unselected slices by rendering them with a special style. (For details, refer to the Styling topic.)

Configuring the sliceClicked option with an event handler adds or removes the item associated to the clicked slice from an internal array. The event handler uses the ui.selected flag passed from the control to determine whether the slice had just been selected or unselected.

Note: If the API selection changes the sliceClicked event will not fire. You can get the indices of the selected slices using the selectedSliceItems() method of the igFunnelChart.

Code

Following is the code that implements this example.

In JavaScript:

var selectedSlices = [];
$("#chart").igFunnelChart({
    width: "350px",
    height: "500px",
    dataSource: data,
    valueMemberPath: "Budget",
    innerLabelMemberPath: "Budget",
    innerLabelVisibility: "visible",
    outerLabelMemberPath: "Department",
    outerLabelVisibility: "visible",
    allowSliceSelection: true,
    useUnselectedStyle: true,
    sliceClicked: function (evt, ui) {
        if (ui.selected) {
            selectedSlices.push(ui.item);
        }
        else {
            selectedSlices.removeItem(ui.item);
        }
    }
});

Related Content

Topics

The following topics provide additional information related to this topic.

• Binding igFunnelChart to Data: This topic explains how to bind the igFunnelChart control to various data sources.

• Styling igFunnelChart: This topic explains how to customize the look-and-feel of the igFunnelChart control.

• Accessibility Compliance (igFunnelChart): This topic explains the igFunnelChart control’s accessibility features and provides advice on how to achieve accessibility compliance for pages containing charts.

• Known Issues and Limitations (igFunnelChart): This topic lists the known issues related to the igFunnelChart control.

• jQuery and MVC API Links (igFunnelChart): This topic lists the links to the API reference documentation for the igFunnelChart control.

Samples

The following sample provides additional information related to this topic.

• Slice Selection: This sample demonstrates enabling the slice selection functionality and handling the sliceClicked event.