Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link data-require="bootstrap@3.3.6" data-semver="3.3.6" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> <script src="js/jquery-hBarChart/hBarChart.js"> </script> <script> $(function() { $(".horizontal-chart-demo").hBarChart({ bgColor: '#418383', textColor: '#FFD5BF', show: 'data', sorting: false, maxStyle: { bg: '#BF0000', text: '#FFFF82' } }); }) </script> </head> <body> <section> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> A demo of horizontal chart with custom settings </h3> </div> <div class="panel-body"> <div> <ul class="horizontal-chart-demo"> <li data-data="1430"> Java </li> <li data-data="1300"> Python </li> <li data-data="1100"> C Sharp </li> <li data-data="880"> Oracle </li> <li data-data="680"> MS SQL Server </li> <li data-data="1050"> MySQL </li> <li data-data="1500"> PHP </li> <li data-data="700"> JSP </li> <li data-data="500"> Ruby </li> </ul> </div> </div> </div> </div> <!--6 end --> </div> </div> </section> <!-- chart1 --> </body> </html>
A demo of horizontal chart with custom settings
Java
Python
C Sharp
Oracle
MS SQL Server
MySQL
PHP
JSP
Ruby