In order to make the linear gauge to look like a Progress Bar, i.e its value to fill the whole DIV, you need to set several of the Gauge’s properties.
– hide the ranges by setting the showRanges property to false.
– hide the tick marks by setting the ticksMajor and ticksMinor to false.
– hide the Gauge’s labels by setting the ‘visible’ property of the labels object to false.
– set the pointer’s size and scaleLength to 100%.
Vertical Gauge
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#gauge').jqxLinearGauge({ min: 0, max: 200, showRanges: false, ticksMajor: { visible: false }, ticksMinor: { visible: false }, labels: { visible: false }, background: { backgroundType: 'rectangle' }, pointer: { size: '100%', offset: '50%' }, scaleLength: '100%', ticksOffset: [0, 0], width: 20 }); $('#gauge').jqxLinearGauge('value', 200); }); </script></head><body class='default'> <div id="gauge"></div> </body></html>
Horizontal Gauge
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#gauge').jqxLinearGauge({ min: 0, max: 200, showRanges: false, ticksMajor: { visible: false }, ticksMinor: { visible: false }, labels: { visible: false }, background: { backgroundType: 'rectangle' }, pointer: { size: '100%', offset: '50%' }, scaleLength: '100%', ticksOffset: [0, 0], height: 20, width: 200, orientation: 'horizontal' }); $('#gauge').jqxLinearGauge('value', 200); }); </script></head><body class='default'> <div id="gauge"></div> </body></html>
