Introduction to Funnel Chart
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:
{
"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:
-
Interactive funnel slices, which when clicked can separate from the main funnel
-
Option to set same slant angle for each funnel slice (or make them dependent on data)
-
Ability to seamlessly convert 3D funnel to 2D funnel, by right clicking on the chart and selecting
View 2D -
Option to render the funnel in 2D mode with more control over the border and fill properties
-
Option to show values as actual values or in percentage
-
Option to show a value as a percentage of the first value or the previous value.
-
Smart labels to avoid overlapping of funnel labels
-
Option to place labels at the side or at the center of the funnel chart
-
Custom tool text for each funnel slice
-
Links supported for each funnel slice