jQuery Plugin To Render Funnel Charts Using HTML / CSS - Funnel

Funnel is a lightweight jQuery plugin for rendering cross-browser funnel charts with equal height segments using plain Html and CSS.

Basic usage:

1. Include jQuery library and the jQuery funnel plugin on your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.funnel.js"></script>

2. Create a DIV element that will be served as a container for the funnel chart.

<div id="funnel-container"></div>

3. Specify the funnel data & segment colors in a JS object.

var funnelData = [
    {
        value: 5000,
        color:"#ED5565"
    },
    {
        value: 4000,
        color: "#FC6D58"
    },
    {
        value: 3000,
        color: "#46CFB0"
    },
    {
        value: 2000,
        color: "#9FD477"
    },
    {
        value: 1000,
        color: "#ED87BD"
    }
  ];

4. The JavaScript to render a funnel chart inside the empty container you just created.

$('#funnel-container').drawFunnel(funnelData, {

  // Container height, 
  // i.e. height of #funnel-container
  width: $(this).width(), 

  // Container width, 
  // i.e. width of #funnel-container
  height: $(this).height(),  

  // Padding between segments, in pixels
  padding: 1, 

  // Render only a half funnel
  half: false,  

  // Width of a segment can't be smaller than this, in pixels
  minSegmentSize: 0,  

  // A label generation function 
  label: function () { return "Label!"; }  
  
});

---

This awesome jQuery plugin is developed by mtolmacs. For more Advanced Usages, please check the demo page or visit the official website.