Telerik UI for Windows 8 HTML

Funnel series is usually used in scenarios that visualize different stages of a process and the data related to them. This type of series is very useful for visualization of sales data with relation to effectiveness of sales effort. It can also be used to represent the result from marketing campaigns, graduation results, etc. The series begins with a 100% value at the top and ends with a lower one, displaying the stages of the process and the rate by which each of them decreases in quantity.

Figure 1: Web Site Statistics Visualized by a Funnel Series
chart-funnel-series

Defining Funnel Series Declaratively

To define a Funnel series in the HTML, add an object with type property set to "funnel" to the series array.

Code Listing 1: Declarative Definition of a Funnel Series Copy imageCopy
<div id="declarativeFunnelSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'funnel',
        data: [134000, 105200, 75500, 52000, 30200],
        dynamicSlope: true
    }],
    theme: 'light'
}">
</div>

Defining Funnel Series Programmatically

To programmatically add a Funnel series to your chart, create a new Telerik.UI.Chart.FunnelSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh() to have the changes take effect.

Code Listing 2: Programmatic Definition of a Funnel Series Copy imageCopy
var funnelSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("funnelSeriesChart"), { theme: 'light' });
var funnelSeries = new Telerik.UI.Chart.FunnelSeries();
funnelSeries.data = [134000, 105200, 75500, 52000, 30200];
funnelSeries.dynamicSlope = true;
funnelSeriesChartCtrl.series.push(funnelSeries);
funnelSeriesChartCtrl.refresh();

Configuring Funnel Series

Apart from the common configuration settings listed in this article, there a few more specific ones that you can use to customize the look and behavior of the Funnel series.

Providing Data

You can define three fields when binding a Funnel series:

  • field: The field containing the numeric value that will be represented by a segment in the funnel.

  • colorField: The field that contains a CSS color. It will be applied to the current segment (optional).

  • categoryField: A field that contains the category of the current segment, for example, the name of the stage of a process represented by the current segment (optional).

You can see all three fields used in Code Listing 3 below. The result is visible in Figure 1.

Code Listing 3: Setting Funnel Series Fields Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'funnel',
        field: 'visitors',
        colorField: 'valueColor',
        categoryField: 'description'
    }],
    dataSource: {
        data: [
            {
                description: 'All Visitors',
                visitors: 28536,
                valueColor: '#2A80B9'
            }, {
                description: 'Tried the Demos',
                visitors: 26539,
                valueColor: '#27AE61'
            }, {
                description: 'Downloaded',
                visitors: 23088,
                valueColor: '#F39C11'
            }, {
                description: 'Requested a Quote',
                visitors: 13853,
                valueColor: '#D25400'
            }, {
                description: 'Purchased',
                visitors: 9697,
                valueColor: '#8F44AD'
            }
        ]
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
</div>
Figure 2: Setting Funnel Series Fields
chart-funnel-series-fields

Controlling Segment Height

Using the dynamicHeight property, you can determine whether all segments have the same height (when the option value is set to false) or the height of each segment is based on its value. The default value is true. You can see in Code Listing 4 and then Figure 3 how setting the dynamicHeight property to false results in all funnel segments having the same height, no matter what their value is.

Code Listing 4: Disabling Dynamic Height Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'funnel',
        field: 'visitors',
        colorField: 'valueColor',
        categoryField: 'description',
        dynamicHeight: false
    }],
    dataSource: {
        data: [
            {
                description: 'All Visitors',
                visitors: 28536,
                valueColor: '#2A80B9'
            }, {
                description: 'Tried the Demos',
                visitors: 26539,
                valueColor: '#27AE61'
            }, {
                description: 'Downloaded',
                visitors: 23088,
                valueColor: '#F39C11'
            }, {
                description: 'Requested a Quote',
                visitors: 13853,
                valueColor: '#D25400'
            }, {
                description: 'Purchased',
                visitors: 9697,
                valueColor: '#8F44AD'
            }
        ]
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
</div>
Figure 3: Funnel Chart with Disabled Dynamic Height
chart-funnel-series-height

Controlling Slope

You can also determine whether the ratio of the bases of each segment is dynamically calculated, using the dynamicSlope property. If the ratio is dynamic (the property is set to true), it equals the ratio of currentDataItem.value/nextDataItem.value. Note that in this case the last element is always a rectangle (see Figure 4 since there is no following element. The dynamicSlope property default value is false.

Code Listing 5: Enabling Dynamic Slope Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'funnel',
        field: 'visitors',
        colorField: 'valueColor',
        categoryField: 'description',
        dynamicSlope: true
    }],
    dataSource: {
        data: [
            {
                description: 'All Visitors',
                visitors: 28536,
                valueColor: '#2A80B9'
            }, {
                description: 'Tried the Demos',
                visitors: 26539,
                valueColor: '#27AE61'
            }, {
                description: 'Downloaded',
                visitors: 23088,
                valueColor: '#F39C11'
            }, {
                description: 'Requested a Quote',
                visitors: 13853,
                valueColor: '#D25400'
            }, {
                description: 'Purchased',
                visitors: 9697,
                valueColor: '#8F44AD'
            }
        ]
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
Figure 4: Funnel Chart with Enabled Dynamic Slope
chart-funnel-series

Changing Neck Ratio

If you want to set a custom ratio between the funnel segments width, you can use the neckRatio property. It specifies the ratio top-base/bottom-base of the whole chart. For example, neckRatio set to 3 means the top base is three times smaller than the bottom base. In the following example, the neck ratio is set to 0.5, meaning that the top base is twice as big as the bottom base.

Code Listing 6: Modifying the Chart Neck Ratio Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'funnel',
        field: 'visitors',
        colorField: 'valueColor',
        categoryField: 'description',
        neckRatio: 0.5
    }],
    dataSource: {
        data: [
            {
                description: 'All Visitors',
                visitors: 28536,
                valueColor: '#2A80B9'
            }, {
                description: 'Tried the Demos',
                visitors: 26539,
                valueColor: '#27AE61'
            }, {
                description: 'Downloaded',
                visitors: 23088,
                valueColor: '#F39C11'
            }, {
                description: 'Requested a Quote',
                visitors: 13853,
                valueColor: '#D25400'
            }, {
                description: 'Purchased',
                visitors: 9697,
                valueColor: '#8F44AD'
            }
        ]
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
</div>
Figure 5: Funnel Chart with Neck Ratio Set to 0.5
chart-funnel-series-neck

Changing Distance Between Segments

You can use the segmentSpacing property to set the space in pixels between the different segments of the Funnel chart. This will result in the segments being separated from one another, as shown in Figure 6.

Code Listing 7: Separating the Funnel Segments Copy imageCopy
<div data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'funnel',
        field: 'visitors',
        colorField: 'valueColor',
        categoryField: 'description',
        segmentSpacing: 10
    }],
    dataSource: {
        data: [
            {
                description: 'All Visitors',
                visitors: 28536,
                valueColor: '#2A80B9'
            }, {
                description: 'Tried the Demos',
                visitors: 26539,
                valueColor: '#27AE61'
            }, {
                description: 'Downloaded',
                visitors: 23088,
                valueColor: '#F39C11'
            }, {
                description: 'Requested a Quote',
                visitors: 13853,
                valueColor: '#D25400'
            }, {
                description: 'Purchased',
                visitors: 9697,
                valueColor: '#8F44AD'
            }
        ]
    },
    tooltip: {
      visible: true
    },
    theme: 'light'
    }">
Figure 6: Funnel Chart with a Distance Between Segments
chart-funnel-series-distance

See Also