Available in the Full Version

Funnel Chart - Using TypeScript

Funnel Chart

Weighted Slices

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 create Funnel Chart with and without weighted slices in TypeScript . It shows how to enable slice Selection functionality for the Funnel Charts and how to handle the slice selected event.

Code View

Copy to Clipboard

HTML
TypeScript

                    <!DOCTYPE html>
<html>
<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"></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/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>


</head>
<body>
    <link href="/css/charts/chart-samples.css" type="text/css" rel="stylesheet" />

    <div class="sampleContent">
        <div class="chartContainer">
            <h4>Funnel Chart</h4>
            <div id="chartNormal"></div>
        </div>
        <div class="chartContainer">
            <h4>Weighted Slices</h4>
            <div id="chartWeighted"></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>
                <table id="selectedSlicesGrid1"></table>
            </div>

            <div style="float: right; padding-top: 20px;">
                <h4 style="float: left;">Selected Slices (grid will be empty until slice selection is performed):&nbsp;</h4>
                <table id="selectedSlicesGrid2"></table>
            </div>
        </div>

        <script src="/TypeScriptSamples/funnel-chart/typescript.js"></script>
    </div>
</body>
</html>

             /// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

class Department {
    departmentName: string;
    budget: number;
    constructor(inDepartmentName: string, inBudget: number) {
        this.departmentName = inDepartmentName;
        this.budget = inBudget;
    }
}

var departments: Department[] = [];
departments.push(new Department("Administration", 30));
departments.push(new Department("Sales", 50));
departments.push(new Department("IT", 60));
departments.push(new Department("Marketing", 50));
departments.push(new Department("Development", 100));
departments.push(new Department("Support", 20));

var selectedSlicesNormal = [];
var selectedSlicesWeighted = [];

$(function () {
    //  Create a basic funnel chart
    $("#chartNormal").igFunnelChart({
        width: 325,
        height: 500,
        dataSource: departments,
        valueMemberPath: "budget",
        innerLabelMemberPath: "budget",
        innerLabelVisibility: "visible",
        outerLabelMemberPath: "departmentName",
        outerLabelVisibility: "visible",
        allowSliceSelection: true,
        useUnselectedStyle: true,
        sliceClicked: function (evt, ui) {
            if (ui.selected) {
                selectedSlicesNormal.push(ui.item);
            }
            else {
                var index = selectedSlicesNormal.indexOf(ui.item, 0);
                if (index != undefined) {
                    selectedSlicesNormal.splice(index, 1);
                }
            }
            $("#selectedSlicesGrid1").igGrid("dataBind");
        },
        selectedSliceStyle: {
            fill: "lightblue",
            stroke: "black"
        },
        unselectedSliceStyle: {
            fill: "lightgrey",
            stroke: "grey"
        }
    });

    //  Instantiate the selected slices grid for the basic funnel chart
    $("#selectedSlicesGrid1").igGrid({
        dataSource: selectedSlicesNormal,
        columns: [
            { key: "departmentName", headerText: "Department", width: "130px" },
            { key: "budget", headerText: "Budget", width: "70px" }
        ]
    });

    //  Create a funnel chart with weighted size slices
    $("#chartWeighted").igFunnelChart({
        width: 325,  //"325px",
        height: 500,
        dataSource: departments,
        outerLabelAlignment: "right",
        valueMemberPath: "budget",
        innerLabelMemberPath: "budget",
        innerLabelVisibility: "visible",
        outerLabelMemberPath: "departmentName",
        outerLabelVisibility: "visible",
        funnelSliceDisplay: "weighted",
        allowSliceSelection: true,
        useUnselectedStyle: true,
        sliceClicked: function (evt, ui) {
            if (ui.selected) {
                selectedSlicesWeighted.push(ui.item);
            }
            else {
                var index = selectedSlicesWeighted.indexOf(ui.item, 0);
                if (index != undefined) {
                    selectedSlicesWeighted.splice(index, 1);
                }
            }
            $("#selectedSlicesGrid2").igGrid("dataBind");
        },
        selectedSliceStyle: {
            fill: "lightblue",
            stroke: "black"
        },
        unselectedSliceStyle: {
            fill: "lightgrey",
            stroke: "grey"
        }
    });

    //  Instantiate the selected slices grid for the funnel chart with weighted slices 
    $("#selectedSlicesGrid2").igGrid({
        dataSource: selectedSlicesWeighted,
        columns: [
            { key: "departmentName", headerText: "Department", width: "130px" },
            { key: "budget", headerText: "Budget", width: "70px" }
        ]
    });
});

Ignite UI for jQuery | Samples

Search Results

Funnel Chart - Using TypeScript

Funnel Chart

Weighted Slices

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

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

Code View