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