Available in the Full Version

Funnel Chart - Overview

The igFunnelChart control is similar to the igPieChart in that it displays values associated with different categories. The igFunnelChart differs because the sum of the displayed values is not necessarily the total of a larger entity. Funnel slices are typically displayed sorted by value, either largest to smallest or in reverse order. The igFunnelChart supports slice selection, tooltips, and bezier curver rendering. See the complete list of samples in the menu.

Funnel Chart

Weighted Slices

Inverted Funnel Chart

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how to use the Funnel Chart control to render data as slices from the largest value to the smallest value with the capability to invert the positions of the slices.

Code View

Show In JsFiddle

Copy to Clipboard

                    var data = [
    { Budget: 30, Department: "Administration" },
    { Budget: 50, Department: "Sales" },
    { Budget: 60, Department: "IT" },
    { Budget: 50, Department: "Marketing" },
    { Budget: 100, Department: "Development" },
    { Budget: 20, Department: "Support" }
];

    //  Create a basic funnel chart
    $("#chartNormal").igFunnelChart({
        width: "100%",  //"325px",
        height: "450px",
        dataSource: data,
        valueMemberPath: "Budget",
        innerLabelMemberPath: "Budget",
        innerLabelVisibility: "visible",
        outerLabelMemberPath: "Department",
        outerLabelVisibility: "visible"
    });

    //  Create a funnel chart with weighted size slices
    $("#chartWeighted").igFunnelChart({
        width: "100%",  //"325px",
        height: "450px",
        leftMargin: 20,
        dataSource: data,
        valueMemberPath: "Budget",
        innerLabelMemberPath: "Budget",
        innerLabelVisibility: "visible",
        outerLabelMemberPath: "Department",
        outerLabelVisibility: "visible",
        funnelSliceDisplay: "weighted"
    });

    //  Create an inverted funnel chart
    $("#chartInverted").igFunnelChart({
        width: "100%",  //"325px",
        height: "450px",
        leftMargin: 20,
        dataSource: data,
        valueMemberPath: "Budget",
        innerLabelMemberPath: "Budget",
        innerLabelVisibility: "visible",
        isInverted: true
    });

                    <div class="sampleContent">
        <div class="chartContainer chartContainer3">
            <h4>Funnel Chart</h4>
            <div id="chartNormal"></div>
        </div>
        <div class="chartContainer chartContainer3">
            <h4>Weighted Slices</h4>
            <div id="chartWeighted"></div>
        </div>
        <div class="chartContainer chartContainer3">
            <h4>Inverted Funnel Chart</h4>
            <div id="chartInverted"></div>
        </div>
    </div>

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js" type="text/javascript"></script>

</head>
<body>
    <link href="/css/charts/chart-samples.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
        var data = [
            { Budget: 30, Department: "Administration" },
            { Budget: 50, Department: "Sales" },
            { Budget: 60, Department: "IT" },
            { Budget: 50, Department: "Marketing" },
            { Budget: 100, Department: "Development" },
            { Budget: 20, Department: "Support" }
        ];

        $(function () {
            //  Create a basic funnel chart
            $("#chartNormal").igFunnelChart({
                width: "100%",  //"325px",
                height: "450px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible"
            });

            //  Create a funnel chart with weighted size slices
            $("#chartWeighted").igFunnelChart({
                width: "100%",  //"325px",
                height: "450px",
                leftMargin: 20,
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible",
                funnelSliceDisplay: "weighted"
            });

            //  Create an inverted funnel chart
            $("#chartInverted").igFunnelChart({
                width: "100%",  //"325px",
                height: "450px",
                leftMargin: 20,
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                isInverted: true
            });
        });
    </script>

    <div class="sampleContent">
        <div class="chartContainer chartContainer3">
            <h4>Funnel Chart</h4>
            <div id="chartNormal"></div>
        </div>
        <div class="chartContainer chartContainer3">
            <h4>Weighted Slices</h4>
            <div id="chartWeighted"></div>
        </div>
        <div class="chartContainer chartContainer3">
            <h4>Inverted Funnel Chart</h4>
            <div id="chartInverted"></div>
        </div>
    </div>
</body>
</html>