Funnel Chart

Overview

The Funnel chart is a chart that displays data in a funnel pattern.

Creating the Funnel Chart

The Funnel class extends the Ardisia ChartBase class so it can be added to containers that implement IVisualElementContainer.

Using the Funnel Chart

The Funnel chart works by assigning a "seriesValueField" to extract the series data from the dataProvider. A series is a collection of related data to display.

By default, series data is arranged as a funnel in the same order as the data in the dataProvider. To display the data from the largest to the smallest, top to bottom, set the "sorted" property to true.

Item Renderers

All renderers are FunnelRenderer objects.

DataTip(s)

If the "showDataTip" property is true, a dataTip will display when the user hovers over series data.

When using a custom "dataTipFormatFunction", the "totalWeight" property is useful because it can be used to display the relative weight of each node. Also, tooltips can be passed TextFlow objects for a highly customized appearance.

The dataTip will persist for a time set by the "dataTipHideDelay" after users mouse out of data nodes.

Animations & Effects

Use the "HighlightAlpha" and "HighlightDuration" properties to control how renderers other than the hovered renderer are faded.

Labels

Display series labels via the "displayLabels" property. The series label is retrieved from the "seriesLabelField" property on the data.

Legend

To automatically apply a legend, add an Ardisia Legend to the display and send the legend a reference to the chart.

<ardisia:Legend chart="{funnelChart}">

In the example above, assuming that a chart with the ID "funnelChart" has been created, a legend would be displayed that would automatically display the series for the chart.

See the ASDocs for the Legend for additonal properties and options.

Layout

Change the appearance of the chart via properties such as: "slope", "neckRatio", and "gap".

Coloring

Series renderers are colorized by default.

Alternatively, you can supply a callback "colorFormatFunction" to supply custom colors to the series item renderers.

Default Property

The dataProvider is the default property.

Themes & Skinning

A skin is provided for the Spark theme.

Example

See the Funnel chart demo application for example code.

Back To Top