Horizontal Responsive Bar Chart
Creates a responsive horizontal bar chart using HTML5, jQuery & CSS
Even works in IE6!!
The plugin uses the data-number
attribute for the graph length.
jQuery will then cycle through all the selector
's and find the one with the highest number. That number will be used as 100% base point and make the rest of the bars relative to that number.
Use
Required files
Include jQuery and required files
<script src="build/js/jquery.min.js"></script> <script src="build/js/jquery.horizBarChart.min.js"></script>
Markup:
The plugin uses the data-number
attribute for the graph length.
jQuery will then cycle through all the selector
's and find the one with the highest number.
That number will be used as 100% base point and make the rest of the bars relative to that number.
<ul class="chart"> <li><span class="bar" data-number="38000"></span><span class="number">38,000</span></li> <li><span class="bar" data-number="134000"></span><span class="number">134,000</span></li> </ul>
Code:
Simplest way to use is create the following markup and just call .horizBarChart()
on your containing element.
$('.chart').horizBarChart();
Options & Defaults
The following are the available options and default values.
$('.chart').horizBarChart({ selector: '.bar', speed: 3000 });
Example
View an example on GitHub pages : http://eriku.github.io/horizontal-chart