This time I will share jQuery Plugin and tutorial about Responsive Customizable Bar Indicator with jQuery – Bars.js, hope it will help you in programming stack.
Bars.js is a lightweight jQuery plugin that enables you visualize numeric data into responsive, dynamic, fully styleable bar indicators.
How to use it:
1. Load the required CSS file bar.css in the head section of the document.
1 |
<link href="bars.css" rel="stylesheet"> |
2. Load the JavaScript file Bars.js after jQuery library but before the closing body tag.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="bars.js"></script> |
3. Visualize the numeric data wrapper in the DIV elements into a bar group. By default, Bars.js finds the highest value in a bar group and bases the comparison on that. All CSS helper:
- thin: thin bars
- thick: thick bars
- n_bg: no background
- gradient: gradient colors
- c_red: custom colors. c_red, c_green, c_blue, c_pink, or c_brown
- elastic: elastic animation
1 |
<div class='bar_group'> |
2 |
<div class='bar_group__bar thin' value='230'></div> |
3 |
<div class='bar_group__bar thin' value='130'></div> |
4 |
<div class='bar_group__bar thin' value='160'></div> |
5 |
<div class='bar_group__bar thin' value='340'></div> |
6 |
<div class='bar_group__bar thin' value='290'></div> |
4. Show labels, tooltips, values and units on the bars.
1 |
<div class="bar_group__bar thin" label="Vuaxhall Corsa" show_values="true" unit="mpg" value="343"></div> |
2 |
<div class="bar_group__bar thin" label="Toyota Celica" show_values="true" unit="mpg" value="235"></div> |
3 |
<div class="bar_group__bar thin" label="Landrover" show_values="true" unit="mpg" value="675"></div> |
4 |
<div class="bar_group__bar thin" label="Peagueot 106" show_values="true" unit="mpg" value="456"></div> |
5 |
<div class="bar_group__bar thin" label="Lawnmower" show_values="true" unit="mpg" value="245"></div> |
This awesome jQuery plugin is developed by jcoulterdesign. For more Advanced Usages, please check the demo page or visit the official website.
