BarGauge
========
Small jQuery Plugin to display a Progress / Bar Gauge
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="js/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(css/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
toolTip: '' // If set, this will use jQuery Tooltip
});
HTML:
<div id="demo1" class="barGauge_container" ></div>
|
Download
