jQuery Funnel Charts & Graphs

Download jQuery Chart Samples

jQuery Funnel Charts are used to represent multiple stages in a process and are widely used in visualizing sales process. Funnel Charts are fully customizable & are interactive. Given example shows simple jQuery Funnel Chart along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function () {

var options = {
	animationEnabled: true,
	theme: "light2", //"light1", "light2", "dark1", "dark2"
	title: {
		text: "Sales Analysis - March 2017"
	},
	data: [{
		type: "funnel",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		indexLabel: "{label} ({percentage}%)",
		dataPoints: [
			{ y: 1800, label: "Leads" },
			{ y: 1552, label: "Initial Communication" },
			{ y: 1320, label: "Customer Evaluation" },
			{ y: 885, label: "Negotiation" },
			{ y: 678, label: "Order Received" },
			{ y: 617, label: "Payment" }
		]
	}]
};
calculatePercentage();
$("#chartContainer").CanvasJSChart(options);

function calculatePercentage() {
	var dataPoint = options.data[0].dataPoints;
	var total = dataPoint[0].y;
	for (var i = 0; i < dataPoint.length; i++) {
		if (i == 0) {
			options.data[0].dataPoints[i].percentage = 100;
		} else {
			options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2);
		}
	}
}

}

Chart Customizations

Index / Data Labels can be placed inside the funnel section by using the indexLabelPlacement property. Other common customizations include valueRepresents, color, fillOpacity, neckHeight, neckWidth etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial