jQuery Funnel Charts & Graphs

Funnel Charts are used to represent multiple stages in a process and are widely used in visualizing sales process. Given example shows simple 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);
		}
	}
}

}

Related Customization

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