Welcome to BarGauge.
This is a small jQuery Plugin to display a Progress Bar or Bar Gauge. It fairly easy to use.
Example:
Demo 1
Demo 2
Demo 3
Usage:
Include in Head Tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.BarGauge.js"></script>
JavaScript / jQuery:
$('#demo1').BarGauge({
color: "#00C", // Color of the Progress / Gauge Bar
backgroundColor: "#FFF", // Background color of Progress / Gauge Bar
width: "754px", // Default width of Bar (Original Graphic Size of faceplate)
height: "72px", // Default height of Bar
value: 0.01, // Value of Bar Gauge (Current Position)
goal: 1.00, // Goal of Bar Gauge (Maximum Position)
title: "BarGauge", // Default Title of Bar Gauge
showTitle: true, // If True show title
value_before: "", // Default Value before text I.E. $1,000
value_after: "", // Default Value Text end text I.E 1,000 USD
showValue: true, // If True Show the value field in the Gauge Bar
valueColor: '#3cff00', // Default Value Color
faceplate: "url(stylesheets/BarGauge/bar_graph.png) no-repeat", // Default locaiton of faceplate graphic other options (bar_gra
ph(colorScale).png and bar_graph(gradient).png)
animSpeed: 400, // Animation Speed can be string "slow","fast",etc... Or Integer
animType: "swing", // Animation Type (jQuery Animation Methods)
decPlaces: 2, // Default decimal places on the text field when showing value
thouSeparator: ',', // Default Thousands seperator I.E. 1,000 or 1.000
decSeparator: '.' // Default Decimal Separator I.E. 0.001 or 0,001
});
HTML:
<div id="demo1" class="barGauge_container"></div>
Authors and Contributors
This Plugin was created by Robert Haddad (SmokinPuppy)in 2014.
Support or Contact
Having trouble with this plugin? Check out the documentation at https://github.com/smokinpuppy/BarGauge or contact rha2180@yahoo.com and I’ll help you sort it out.