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.


North American Regional Population Loss 2014
Arizona
New Mexico
Nevada
Colorado
Utah
California
100,000
200,000
300,000
400,000
500,000
Population

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:

13
24
17
26
12
8