Description

---

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

---

Many of the options can be overridden in raw HTML, without the need to write any Javascript. First, place a block element, like a <div> on the page (#bar_of_pies in the example below). You can give it a name to override the title, a semantic bootstrap-like class ("chart-sm" or "chart-lg") to change bar and text sizing, a data-width attribute(Integer specifying chart width in pixels), and a data-sort="true" to override the sort function (default is false). The content of the element should be the value that you want the bar to have.

Additionally, you may include any number of elements within your container with the class "define-chart-row" to create a new bar. Give that element a data-color (rgb, hex, or semantic) to override the color. You can specify a title attribute in that element to give the bar a heading.

You may also specify any number of elements with the class "define-chart-footer" to indicate where a footer should be placed. The value that the footer and label should be placed at should be the content of the element.

Here is an example

	
	<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:

Options

---

Option	Description	Default
width	A number specifying the pixel width of the chart	750
name	The name of the chart, displayed at the top of the chart	null
type	The type of chart - currently only supports bar charts	"bar"
headers	A Javascript array of bar labels	null (no labels)
values	A Javascript array of numeric values for each corresponding bar	null
footers	A Javascript array of numeric values to display at the bottom of the chart	null
colors	A Javascript array of colors that will loop back if needed	#6b9bd6 (dark blue)
sort	Indicates if the bars should be sorted (not implemented)	false