Post
Ask Question

Funnel Charts Using JavaScript - D3Funnel.js

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 the funnel chart
 
Consider we already have a system that 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.
  1. Create index.html and copy-paste below code,
    1. <!DOCTYPE html>    
    2. <html lang="en">    
    3.     <head>    
    4.         <title>Funnel Chart Sample</title>    
    5.         <meta charset="utf-8">    
    6.             <meta name="viewport" content="width=device-width, initial-scale=1">    
    7.                 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
    8.                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
    9.                     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
    10.                 </head>    
    11.                 <body>    
    12.                     <div class="container">    
    13.                         <div class="page-header">    
    14.                             <h2>    
    15. Funnel Chart</h2>    
    16.                         </div>    
    17.                         <div class="row">    
    18.                             <div class="col-lg-6">    
    19.                                 <div class="panel panel-default">    
    20.                                     <div class="panel-heading">    
    21.                                         <span class="glyphicon glyphicon-equalizer"></span>Sales Funnel     
    22.     
    23.                                     </div>    
    24.                                     <div class="panel-body">    
    25.                                         <div id="funnel"></div>    
    26.                                     </div>    
    27.                                 </div>    
    28.                             </div>    
    29.                         </div>    
    30.                         <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>    
    31.                         <script src="d3-funnel.min.js" type="text/javascript"></script>    
    32.                         <script src="app.js" type="text/javascript"></script>    
    33.                     </body>    
    34.                 </html>   
    In the above code base, you will notice references for D3.min.js and d3-funnel.min.js
     
    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>
     
  2. Behind this index.html, we have an implementation in our app.js.
     
    Refer our app.js as below,
    1. $(document).ready(function()    
    2. {    
    3.     showfunnel();    
    4. });    
    5.     
    6. function showfunnel()    
    7. {    
    8.     var data =    
    9.     [    
    10.         ['PROSPECT', 2500000],    
    11.         ['PROPOSAL', 1700000],    
    12.         ['NEGOTIATION', 1000000],    
    13.         ['DEAL', 500000]    
    14.     ];    
    15.     var options =    
    16.         {    
    17.         chart:    
    18.           {    
    19.             curve:    
    20.             {    
    21.                 enabled: true    
    22.             }    
    23.         }    
    24.     };    
    25.     var chart = new D3Funnel('#funnel');    
    26.     chart.draw(data, options);    
    27.     
    28. }   
    In the above code base, you will notice function showfunnel() actually is rendering chart using array data[].
     
    Options- provide various options to render charts. Currently, I am using a funnel to be displayed in curve. So used {chart: {curve:{enabled:true}}}.
     
  3. Open index.html in a browser and see how the 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.
    1. 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 the chart, observe height for each section and their values are in proportion.
    1. var options = {block: {dynamicHeight: true}};   
     
    Funnel Chart with dynamic height based on values
    Fig 4: Funnel Chart with dynamic height based on values.
 

Summary

 
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.


Similar Articles