Simple Funnel Chart Example
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:
{
"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 |
|---|---|
|
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 |
|
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 |