jQuery Bubble Chart

Home >Shield UI Blogs >jQuery Bubble Chart

Buuble chart series are similar to scatter charts. They resemble individual, disconnected points of data. Unlike scatter points, bubbles should not be used in "cluster" scenarios.

Getting Started
In order to take advantage of the functionality offered by the chart component, you will need to:

1. Include references to all required scripts.
2. Add the control declaration along with the desired properties.

<!DOCTYPE html>
<html>
<head>
<title>Shield Chart</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<div id="container" style="width:600px; height:400px;"></div>

<script type="text/javascript">
$(document).ready(function () {
	$("#container").shieldChart({
		  data: [
                     {
                         x: 3.45,
                         y: 26.4,
                         size: 26.4
                     },
                     {
                         x: 20.69,
                         y: 60.8,
                         size: 60.8
                     },
                     {
                         x: 60.02,
                         y: 86.8,
                         size: 86.8
                     },
                     {
                         x: 101.3,
                         y: 100,
                         size: 100
                     },
                     {
                          x: 151.7,
                          y: 112,
                          size: 112
                     }
                ]
	});
});
</script>

</body>
</html>

Unlike other series type, a bubble data point accepts three distinct values. The first two are similar to the scatter series type - x and y values, which determine the exact location of any given point. The third one is the size value, which determines the size of each bubble. This gives a visual presentation of the magnitude of each individual point.
Bubble chart series can be used with axis markers just like any other series type. Their presentation can be enhanced further by using tool-tips to show additional data when the user hovers over a point.

For a complete set of chart features and other controls, visit our online demos section, which contains fully functional samples along with all the required code.

Tags: 
JavaScript, Data Visualization