jQuery Bubble Chart allows you to visualize data in 3 dimensions. It is very similar to Scatter Charts except that size of bubble represents another parameter. Out of the three parameters required (x, y, z), x & y determine the bubble's position on X & Y Axis whereas z determines its size. Given example shows simple jQuery Bubble Chart along with source code that you can edit in-browser or save to run it locally.
window.onload = function() {
var options = {
	animationEnabled: true,
	zoomEnabled: true,
	theme: "light2",
	title: {
		text: "Crude Birth Rate vs Crude Death Rate and Population"
	},
	subtitles: [{
		text: "European Union 2016",
		fontSize: 15
	}],
	axisX: {
		title: "Crude Death Rate"
	},
	axisY: {
		title: "Crude Birth Rate",
		includeZero: true
	},
	data: [{
		type: "bubble",
		xValueFormatString: "#,#0.0",
		yValueFormatString: "#,#0.0",
		zValueFormatString: "#,#0.0",
		toolTipContent: "<b>{name}</b><br/>Crude Death Rate: {x} <br/> Crude Birth Rate: {y}<br/> Population: {z}mn",
		dataPoints: [
			{ x: 5.3, y: 16.5, z: 78.74, name: "Turkey" },
			{ x: 6.4, y: 13.5, z: 4.72, name: "Ireland" },
			{ x: 6.4, y: 11.1, z: 0.84, name: "Cyprus" },
			{ x: 6.9, y: 12, z: 0.33, name: "Iceland" },
			{ x: 7.8, y: 11.2, z: 5.2, name: "Norway" },
			{ x: 7.8, y: 10.5, z: 8.3, name: "Switzerland" },
			{ x: 8.8, y: 8.7, z: 46.44, name: "Spain" },
			{ x: 8.7, y: 10.1, z: 16.9, name: "Netherlands" },
			{ x: 8.8, y: 11.7, z: 66.75, name: "France" },
			{ x: 9.1, y: 11.8, z: 65.3, name: "United Kingdom" },
			{ x: 9.2, y: 10, z: 8.69, name: "Austria" },
			{ x: 9.2, y: 11.8, z: 9.85, name: "Sweden" },
			{ x: 9.2, y: 10.8, z: 5.70, name: "Denmark" },
			{ x: 9.5, y: 10.8, z: 11.31, name: "Belgium" },
			{ x: 9.8, y: 9.6, z: 5.4, name: "Finland" },
			{ x: 10.2, y: 10.7, z: 10.5, z: "Czech Republic" },
			{ x: 10.2, y: 10.1, z: 37.96, name: "Poland" },
			{ x: 10.1, y: 7.8, z: 60.66, name: "Italy" },
			{ x: 10.7, y: 8.4, z: 10.34, name: "Portugal" },
			{ x: 11, y: 8.6, z: 10.7, name: "Greece" },
			{ x: 11.2, y: 9.3, z: 82.17, name: "Germany" },
			{ x: 12.4, y: 9, z: 4.19, name: "Croatia" },
			{ x: 13, y: 9.7, z: 9.83, name: "Hungary" },
			{ x: 13, y: 9.6, z: 19.76, name: "Romania" },
			{ x: 15.1, y: 9.1, z: 7.15, name: "Bulgaria" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);
}                                
                                Zoom / Pan feature can be enabled in the chart by setting zoomEnabled to true. Also you can control the axis for zooming & panning using zoomType property. Other frequently used customization options are color, fillOpacity, markerBorderColor, markerBorderThickness, etc.
Note For step by step instructions, follow our jQuery Integration Tutorial