Available in the Full Version

Funnel Chart - Slice Display

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

HTML

                    <!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>