Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

A funnel chart is used to plot streamlined data. For example, it can be used to plot the sales data for a sales pipeline analysis. A funnel chart consists of multiple segments, each segment representing a data point. You can render a funnel chart in either 2D or 3D.

In this section, you will be introduced to the:

Basics of a Funnel Chart

In a funnel chart, the data is stream-lined, i.e., each funnel slice in the funnel represents a process flow that has filtered out data. For example, if you use a funnel chart to display the employment process, the first funnel slice will represent the “Number of candidates who applied”. Thereafter, each process flow (like “Interview Phase 1”, “IQ Test”, “Project” etc.) will be represented by subsequent funnel slices, each slice filtering the data provided to the previous slice. The last slice bears the value that is the final result of the entire procedure (for e.g., “Candidates recruited” in this scenario).

A streamline funnel chart to show the purchase-conversion analysis looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Website - Harry's SuperMart", "subcaption": "Visit to purchase - Conversion analysis for last year", "decimals": "1", "is2D": "1", "plotTooltext": "Success : $percentOfPrevValue", "showPercentValues": "1", "theme": "fint" }, "data": [ { "label": "Unique Website Visits", "value": "1460000" }, { "label": "Programme Details Section Visits", "value": "930000" }, { "label": "Attempts to Register", "value": "540000" }, { "label": "Successful Registrations", "value": "210000" }, { "label": "Logged In", "value": "190000" }, { "label": "Purchased on Introductory Offers", "value": "120000" } ] }
{
    "chart": {
        "caption": "Website - Harry's SuperMart",
        "subcaption": "Visit to purchase - Conversion analysis for last year",
        "decimals": "1",
        "is2D": "1",
        "plotTooltext": "Success : $percentOfPrevValue",
        "showPercentValues": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Unique Website Visits",
            "value": "1460000"
        },
        {
            "label": "Programme Details Section Visits",
            "value": "930000"
        },
        {
            "label": "Attempts to Register",
            "value": "540000"
        },
        {
            "label": "Successful Registrations",
            "value": "210000"
        },
        {
            "label": "Logged In",
            "value": "190000"
        },
        {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website - Harry's SuperMart",
            "subcaption": "Visit to purchase - Conversion analysis for last year",
            "decimals": "1",
            "is2D": "1",
            "plotTooltext": "Success : $percentOfPrevValue",
            "showPercentValues": "1",
            "theme": "fint"
        },
        "data": [{
            "label": "Unique Website Visits",
            "value": "1460000"
        }, {
            "label": "Programme Details Section Visits",
            "value": "930000"
        }, {
            "label": "Attempts to Register",
            "value": "540000"
        }, {
            "label": "Successful Registrations",
            "value": "210000"
        }, {
            "label": "Logged In",
            "value": "190000"
        }, {
            "label": "Purchased on Introductory Offers",
            "value": "120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Salient Features

The funnel chart incorporates the following features:

Top