jQuery Plugin To Render Funnel Charts Using HTML / CSS - Funnel
File Size: | 4.37 KB |
---|---|
Views Total: | 7746 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.