Skip to main content

Very Easy jQuery Horizonal Bar Chart

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

easy-jquery-bar-chart

This is how to setup your own jQuery bar chart in just a few easy steps. The demo is a horizonal bar chart but you can change the settings of the plugin to vertical, change speed and colors.

Demo

Instructions

  1. Download the jquery.charts.js plugin
  2. Copy the HTML code below
  3. Change the data in the table

That’s it! :-)

HTML and jQuery Code

< ?xml version="1.0" encoding="UTF-8"?>
< !doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="/js/jquery.charts.js"></script>

</head>
<body>

<table id="stats">
	<caption>Statistics</caption>

	<thead>
		<tr>
			<th>Option</th>
			<th>Popularity</th>
		</tr>

	</thead>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>100</td>
		</tr>
	</tfoot>
	<tbody>

		<tr>
			<td>Burnt</td>
			<td>5</td>
		</tr>
		<tr>
			<td>Buried</td>
			<td>1</td>

		</tr>

	</tbody>
</table>

<script type="text/javascript">
	$("#stats").charts();
</script>

</body>
</html>

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Integromat Tower Ad