jQuery Scatter Chart

Home >Shield UI Blogs >jQuery Scatter Chart

Scatter charts render individual, disconnected points. Unlike line and area charts, scatter points do not convey trends well, but are used for individual data entries.

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({
		 dataSeries: [{
                    seriesType: "scatter",
                    collectionAlias: "January 2008",
                    data: [[16.4, 5.4], [21.7, 2], [25.4, 3]]
                }, {
                    seriesType: "scatter",
                    collectionAlias: "January 2009",
                    data: [[6.4, 13.4], [1.7, 11], [5.4, 8]]
                }, {
                    seriesType: "scatter",
                    collectionAlias: "January 2010",
                    data: [[21.7, 3], [13.6, 3.5], [13.6, 3]]
                }]
	});
});
</script>

</body>
</html>

The scatter presentation is usually accompanied by Axis Markers. This feature adds horizontal or vertical (or both) markers, when the user hovers over a point. This allows more precise value tracking and matching. This can be further enhanced by the powerful tool-tip available in the chart, rendering a complete set of custom data, or even html elements.

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