Funnel Charts Using JavaScript - D3Funnel.js

Madan Bhintade
8y
10.4k
0
0

Article

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

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,
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
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>
Behind this index.html, we have implementation in our app.js.

Refer our app.js as below,
1. $(document).ready(function()
2. {
3. showfunnel();
4. });
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);
28. }
In the above code base, you will notice function showfunnel() actually is rendering chart using array data[].

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

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}};
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.
1. var options = {block: {dynamicHeight: true}};
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.

Up Next

Ebook Download

View all

Voice of a Developer: JavaScript From Scratch

Read by 3.8k people

Download Now!

Learn

View all