jQuery Line Chart

Line charts are used to track performance over a period of time. It connects a series of points with straight lines. When working with line series, depending on the precise type of data in the underlying data source, one can choose either a standard line or a scatter. A line is preferred when the distribution of data over time is more even. A Scatter on the other hand, is the better choice when working with clusters of data, which would otherwise be harder to distinguish.


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: 'line',
				applyAnimation: false,
				data: [1, 3, 4, 5]
			}
		]
	});
});
</script>

</body>
</html>

The line chart is part of the ShieldUI JavaScript library, which is also available for ASP.NET, ASP.NET MVC and JAVA. It is one of over 23 chart types. For a complete set of features and controls, visit our online demos section, which contains fully functional samples along with all the required code.