Minimalist Bar Chart Plugin With jQuery And CSS - barChart
File Size: | 2.97 KB |
---|---|
Views Total: | 7299 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

barChart is a minimalist jQuery script which helps you render a basic, animated bar / column chart from plain html lists to present your percentage values.
How to use it:
1. Add your own data to the bar chart using the normal html unordered list like this:
<div id="chart"> <ul id="numbers"> <li><span>100%</span></li> <li><span>90%</span></li> <li><span>80%</span></li> <li><span>70%</span></li> <li><span>60%</span></li> <li><span>50%</span></li> <li><span>40%</span></li> <li><span>30%</span></li> <li><span>20%</span></li> <li><span>10%</span></li> <li><span>0%</span></li> </ul> <ul id="bars"> <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li> <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li> <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li> <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li> <li><div data-percentage="44" class="bar"></div><span>Option 5</span></li> <li><div data-percentage="23" class="bar"></div><span>Option 6</span></li> </ul> </div>
2. The required CSS styles for the bar chart.
#chart { width: 650px; height: 300; margin: 30px auto 0; display: block; } #chart #numbers { height: 100%; width: 50px; margin: 0; padding: 0; display: inline-block; float: left; } #chart #numbers li { text-align: right; padding-right: 1em; list-style: none; height: 29px; border-bottom: 1px solid #444; position: relative; bottom: 30px; } #chart #numbers li:last-child { height: 30px; } #chart #numbers li span { color: #eee; position: absolute; bottom: 0; right: 10px; } #chart #bars { display: inline-block; background: rgba(0, 0, 0, 0.2); width: 600px; height: 300px; padding: 0; margin: 0; box-shadow: 0 0 0 1px #444; } #chart #bars li { display: table-cell; width: 100px; height: 300px; margin: 0; text-align: center; position: relative; } #chart #bars li .bar { display: block; width: 70px; margin-left: 15px; background: #49E; position: absolute; bottom: 0; } #chart #bars li .bar:hover { background: #5AE; cursor: pointer; } #chart #bars li .bar:hover:before { color: white; content: attr(data-percentage) '%'; position: relative; bottom: 20px; } #chart #bars li span { color: #eee; width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center; }
3. Add the necessary jQuery JavaScript library to the webpage.
<script src="//code.jquery.com/jquery.min.js"></script>
4. The jQuery script to animate the bar chart.
$(function(){ $("#bars li .bar").each(function(key, bar){ var percentage = $(this).data('percentage'); $(this).animate({ 'height':percentage+'%' }, 1000); }) })
This awesome jQuery plugin is developed by glenak1911. For more Advanced Usages, please check the demo page or visit the official website.