Available in the Full Version

Funnel Chart - Slice Selection

Selection with Built-In Styles

Selection with Custom Styles

Selected Slices (grid will be empty until slice selection is performed):

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 enable slice selection functionality and how to handle the slice selected event.

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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />

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

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js" type="text/javascript"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js" type="text/javascript"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.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" }
        ];
        var selectedSlices = [];

        $(function () {
            //  Create a funnel chart with slice selection allowed and an event handler for 
            //  the sliceClicked event. The styles for selected and unselected slices from
            //  infragistics.theme.css file are used and redefined in the <style> node of the page.
            $("#chart").igFunnelChart({
                width: "100%",
                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);
                    }
                    $("#selectedSlicesGrid").igGrid("dataBind");
                }
            });

            //  Create a funnel chart with slice selection allowed and custom styles for selected and
            //  unselected slices defined in the selectedSliceStyle & unselectedSliceStyle options.
            $("#chartCustom").igFunnelChart({
                width: "100%",
                height: "500px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible",
                allowSliceSelection: true,
                useUnselectedStyle: true,
                selectedSliceStyle: {
                    fill: "lightblue",
                    stroke: "black"
                },
                unselectedSliceStyle: {
                    fill: "lightgrey",
                    stroke: "grey"
                }
            });

            //  Instantiate the selected slices grid
            $("#selectedSlicesGrid").igGrid({
                dataSource: selectedSlices,
                columns: [
                    { key: "Department", headerText: "Department", width: "130px" },
                    { key: "Budget", headerText: "Budget", width: "70px" }
                ]
            });
        });
    </script>

    <style type="text/css">
        /* 
            Redefine the styles from infragistics.theme.css that configure the appearance of 
            selected and unselected slices.
        */

        .ui-funnel-slice-selected
        {
            opacity: 1;
        }
        .ui-funnel-slice-unselected
        {
            opacity: 0.4;
            border: 1px solid black;
        }
    </style>

    <div class="sampleContent">
        <div class="chartContainer">
            <h4>Selection with Built-In Styles</h4>
            <div id="chart"></div>
        </div>
        <div class="chartContainer">
            <h4>Selection with Custom Styles</h4>
            <div id="chartCustom"></div>
        </div>
        <div>
            <div style="float: left; padding-top: 7px; border-bottom: 1px solid #d0d0d0; width: 100%;">
				</div>
            <div style="float: left; padding-top: 20px;">
					<h4 style="float: left;">Selected Slices (grid will be empty until slice selection is performed):&nbsp;</h4>
				</div>
				<div style="float: left; padding-top: 8px;">
		         <table id="selectedSlicesGrid"></table>
				</div>
        </div>
    </div>
</body>
</html>