Bootstrap and jQuery bar charts – jchart plugin

A lightweight Bootstrap and jQuery bar charts plugin, to render clean bar charts with raw data specified in JS arrays.

jQuery bar charts plugin

jQuery charting plugin – jchart – is a nice and easy to use bar chart solution for web. It works with Bootstrap 3 to provide tooltip support on mouse hover. Requires jQuery 1.9+ and Bootstrap 3.0.x.

The plugin will allows us 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.

jchart - Bootstrap and jQuery bar charts samples
jchart – Bootstrap and jQuery bar charts samples

Usage

We can create a basic bar chart on an HTML element by calling .jChart() function, for example:

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

We need the HTML element, to put the chart on it:

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

There is another way to use this charting plugin. We can do it using HTML5 data attributes.

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">8</div>

  <div class="define-chart-footer">10</div>
  <div class="define-chart-footer">20</div>
  <div class="define-chart-footer">30</div>
</div>

And then make a simple JavaScript call:

$("#bar_of_pies").jChart();

The detailed description of parameters you can find in plugin docs.

License: MIT

Demo and docs:

http://www.requireonce.com/jchart/demo.html

GitHub:

https://github.com/ldenison/jchart

See also:

CanvasJS – HTML5 JavaScript charts – nice and responsive

Responsive charts jQuery plugin – Pizza JS

Chart.js – open source HTML5 Charts

Animated circular progress bars with jQuery

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1