Responsive Customizable Bar Indicator with jQuery - Bars.js
File Size: | 5.52 KB |
---|---|
Views Total: | 9263 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Bars.js is a lightweight jQuery plugin that enables you visualize numeric data into responsive, dynamic, fully styleable bar indicators.
See also:
- jQuery plugin To Visualize Numeric Data - Bar Indicator
- Simple Bar Chart Plugin with jQuery and Bootstrap - jchart
- Responsive Animated Bar Chart with jQuery - Horizontal Chart
- jQuery Plugin To Create Animated Skill & Experience Bars - Skillset.js
How to use it:
1. Load the required CSS file bar.css
in the head section of the document.
<link href="bars.css" rel="stylesheet">
2. Load the JavaScript file Bars.js
after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <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
<div class='bar_group'> <div class='bar_group__bar thin' value='230'></div> <div class='bar_group__bar thin' value='130'></div> <div class='bar_group__bar thin' value='160'></div> <div class='bar_group__bar thin' value='340'></div> <div class='bar_group__bar thin' value='290'></div> </div>
4. Show labels, tooltips, values and units on the bars.
<div class="bar_group__bar thin" label="Vuaxhall Corsa" show_values="true" unit="mpg" value="343"></div> <div class="bar_group__bar thin" label="Toyota Celica" show_values="true" unit="mpg" value="235"></div> <div class="bar_group__bar thin" label="Landrover" show_values="true" unit="mpg" value="675"></div> <div class="bar_group__bar thin" label="Peagueot 106" show_values="true" unit="mpg" value="456"></div> <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.