Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

A funnel chart is used to show streamlined data; each slice in the funnel represents a process that has filtered out data. The last funnel bears the value that is the final result of the entire procedure.

In this section, you will be shown how you can create a simple funnel chart.

Creating a Simple Funnel Chart

For our example, we will create a funnel chart that shows the purchase-conversion analysis; it will filter out data to finally show how many people, who visited the website, actually ended up purchasing something from the website.

To create a funnel chart, you will need to define the data to be represented on the chart. For our example, this data is shown in the table below:

Process Number of People

Unique Website Visits

1,460,000

Programme Details Section Visits

930,000

Attempts to Register

540,000

Successful Registrations

210,000

Logged In

190,000

Purchased on Introductory Offers

120,000

A funnel chart created to show the above 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>

Given below is a brief description of the attributes used to create a simple funnel chart:

Attribute Name Description

value

It is used to show the numerical value for the data represented by a funnel slice. For example, for the slice representing the “Attempts to Register” process, the value will be 540, 000. This attribute belongs to the data object.

label

It is used to specify the label to be be rendered for a funnel slice, e.g. “Unique Website Visits”. This attribute belongs to the data object.

Top