Available in the Full Version

Funnel Chart - Binding XML Data

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 shows how to bind an igFunnelChart to data available in XML structure. For that purpose the XML data is passed to an igDataSource which provides the data to the funnel chart.

Code View

Copy to Clipboard 
<!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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/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 xmlDoc =
            '<CompanyBudget>' +
                '<BudgetEntry Department="Development" Budget="100" />' +
                '<BudgetEntry Department="IT" Budget="60" />' +
                '<BudgetEntry Department="Sales" Budget="60" />' +
                '<BudgetEntry Department="Marketing" Budget="50" />' +
                '<BudgetEntry Department="Administration" Budget="30" />' +
                '<BudgetEntry Department="Support" Budget="20" />' +
            '</CompanyBudget>';

        $(function () {
            //Binding to XML requires a schema to define data fields
            var xmlSchema = new $.ig.DataSchema("xml",
                {
                    //searchField serves as the base node(s) for the XPaths
                    searchField: "//BudgetEntry",
                    fields: [
                        { name: "Department", xpath: "./@Department" },
                        { name: "Budget", xpath: "./@Budget", type: "number" }
                    ]
                }
            );

            //This creates an Infragistics datasource from the XML 
            //and the Schema which can be consumed by the grid.
            var ds = new $.ig.DataSource({
                type: "xml",
                dataSource: xmlDoc,
                schema: xmlSchema
            });

            //  Create a basic funnel chart
            $("#funnel").igFunnelChart({
                width: "100%",
                height: "450px",
                dataSource: ds,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible"
            });
        });
    </script>
    <table>
        <tr>
            <td style="width: 450px; min-width: 210px;">
                <!-- Target element for the igFunnelChart -->
                <div id="funnel" style="border: none;"></div>
            </td>
        </tr>
    </table>
</body>
</html>