Funnel Charts
Funneling or pipeline management has always been an integral part of sales cycles within industries. The following example will give you an idea of how it looks
![Funnel Chart showing sales stages]()
Fig 1: Funnel Chart showing sales stages.
In this article, we will actually build a funnel chart using d3-funnel.js . This d3-funnel is an extensible open source library built on top of D3.js. So while developing d3funnel charts we need to refer first to D3.js and then d3-funnel.js
Use Case – Showing a typical funnel for our sales cycle in funnel chart
Consider we already have a system which is capturing data about all the proposals or opportunities. All these opportunities will be shown in a funnel shape along with their deal value. Key stakeholders can review this funnel and make their decisions about further sales.
Now let's follow the below steps for our use case.
- Create index.html and copy paste below code,
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Funnel Chart Sample</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="page-header">
- <h2>
- Funnel Chart</h2>
- </div>
- <div class="row">
- <div class="col-lg-6">
- <div class="panel panel-default">
- <div class="panel-heading">
- <span class="glyphicon glyphicon-equalizer"></span>Sales Funnel
-
- </div>
- <div class="panel-body">
- <div id="funnel"></div>
- </div>
- </div>
- </div>
- </div>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
- <script src="d3-funnel.min.js" type="text/javascript"></script>
- <script src="app.js" type="text/javascript"></script>
- </body>
- </html>
As a standard, I am displaying my chart in a bootstrap panel.
To generate funnel chart, following ‘id’ is important from our index.html,
<div id="funnel"></div>
- Behind this index.html, we have implementation in our app.js.
Refer our app.js as below,
- $(document).ready(function()
- {
- showfunnel();
- });
-
- function showfunnel()
- {
- var data =
- [
- ['PROSPECT', 2500000],
- ['PROPOSAL', 1700000],
- ['NEGOTIATION', 1000000],
- ['DEAL', 500000]
- ];
- var options =
- {
- chart:
- {
- curve:
- {
- enabled: true
- }
- }
- };
- var chart = new D3Funnel('#funnel');
- chart.draw(data, options);
-
- }
Options – provides various options to render charts. Currently I am using funnel to be displayed in curve. So used {chart: {curve:{enabled:true}}}.
- Open index.html in browser and see how funnel is displayed
![Curved Funnel Chart showing sales stages]()
Fig 2: Curved Funnel Chart showing sales stages.
Chart Options
Now we will try changing some chart options,
Go back to app.js and at options, use the below line to render chart with bottom section pinched a little bit. And refresh index.html.
- var options = {chart: {bottomPinch:1}};
![Pinched Funnel Chart]()
Fig 3: Pinched Funnel Chart.
If you want to display funnel section height based on data then use the below options. After rendering chart, observe height for each section and their values are in proportion.
- var options = {block: {dynamicHeight: true}};
![Funnel Chart with dynamic height based on values]()
Fig 4: Funnel Chart with dynamic height based on values.
So stakeholders can now visualize opportunities or proposal data and with such a funnel decide where to focus. And also they can judge their pipelines.