Available in the Full Version

Funnel Chart - Bezier Curve And Tooltips

Funnel Chart

Bezier Curve Shaped 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 make the appearance of a funnel chart more appealing by using Bezier curves for the shape of the chart. It also displays tooltips when the mouse is hovered over each of the Funnel chart 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/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.dv.js" type="text/javascript"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.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 data = [
            { Id: 0, Budget: 30, Department: "Administration" },
            { Id: 1, Budget: 50, Department: "Sales" },
            { Id: 2, Budget: 60, Department: "IT" },
            { Id: 3, Budget: 50, Department: "Marketing" },
            { Id: 4, Budget: 100, Department: "Development" },
            { Id: 5, Budget: 20, Department: "Support" }
        ];

        $(function () {
            //  Create a basic funnel chart with regular layout
            $("#chartNormal").igFunnelChart({
                width: "100%",
                height: "450px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                tooltipTemplate: "<span>ID:${Id}<br>Dept:${Department}</span>"
            });

            //  Create a funnel chart with Bezier curved shape. You can control the exact shape of 
            //  the Bezier curve By varying the upperBezierControlPoint & lowerBezierControlPoint.
            $("#chartBezier").igFunnelChart({
                width: "100%",
                height: "450px",
                leftMargin: 20,
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                tooltipTemplate: "<span>ID:${Id}<br>Dept:${Department}</span>",
                useBezierCurve: true,
                bezierPoints: "0.1 0.1 0.7 1"
            });
        });
    </script>

    <div class="sampleContent">
        <div class="chartContainer" style="z-index: 2">
            <h4>Funnel Chart</h4>
            <div id="chartNormal"></div>
        </div>
        <div class="chartContainer" style="z-index: 1">
            <h4>Bezier Curve Shaped Chart</h4>
            <div id="chartBezier"></div>
        </div>
    </div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Funnel Chart - Bezier Curve And Tooltips

Funnel Chart

Bezier Curve Shaped Chart

Code View