This plugin will allow you to create a bar chart with raw data, either specified in a Javascript array, or in plain old HTML with some specific classes and attributes.

Requires JQuery 1.9.x and Twitter Bootstrap 3.0.x with tooltip enabled.

Live Demo

Mouse over bars to see their exact value.

---

Javascript Usage

---

You can create a basic bar chart on an html element by calling .jChart() on a JQuery object or collection.

				
$("#population_chart").jChart({
	name: "North American Regional Population Loss 2014",
	headers: ["Arizona","Michigan","Ontario","British Columbia","Texas"],
	values: [250000,478000,88000,429000,423000],
	footers: [100000,200000,300000,400000,500000],
	colors: ["#1000ff","#006eff","#00b6ff","#00fff6","#00ff90"]
});
				
			

All parameters except for the values are optional. The HTML would look like this:

				
<div id="population_chart"></div>
				
			

HTML Usage

---

				
<div id="bar_of_pies" data-sort="true" data-width="300" class="jChart chart-sm" name="My Favorite Pies">
	<div class="define-chart-row" data-color="red" title="Pumpkin">13</div>
	<div class="define-chart-row" data-color="gray" title="Pecan">24</div>
	<div class="define-chart-row" data-color="green" title="Cherry">17</div>
	<div class="define-chart-row" data-color="orange" title="Apple">26</div>
	<div class="define-chart-row" data-color="black" title="Rhubarb">12</div>
	<div class="define-chart-row" data-color="blue" title="Chocolate Cream">8</div>
	
	<div class="define-chart-footer">10</div>
	<div class="define-chart-footer">20</div>
	<div class="define-chart-footer">30</div>
</div>
				
			

Then simply call $("#bar_of_pies").jChart(); without any options specified to generate the chart like below: