<link rel="stylesheet" href="/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="none"></script><script type="text/javascript" src="none"></script><script type="text/javascript" src="none"></script><script type="text/javascript" src="none"></script>Create a DIV element inside the body of your page. You need to define an element which will serve as a container for the gauge. DIV elements are convininent because you can easily position them. Give the DIV element an ID like 'gaugeContainer' or something that you like.
<div id="gaugeContainer"></div>Insert the jQuery document ready code inside the head section of your page:
$(document).ready(function() { // jqxGauge initialization code goes here.}Prepare the gauge display settings and initialize the gauge.
$('#gaugeContainer').jqxGauge({ ranges: [{ startValue: 0, endValue: 55, style: { fill: '#C9C9C9', stroke: '#C9C9C9' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#FCF06A', stroke: '#FCF06A' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 15, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 20, startWidth: 15}], ticksMinor: { interval: 5, size: '5%' }, ticksMajor: { interval: 10, size: '9%' }, value: 0, colorScheme: 'scheme03', animationDuration: 1200});The code above specifies the gauge's ranges, value and color scheme, animationDuration, ticksMajor and ticksMinor size and interval.
$('#gaugeContainer').jqxGauge('value', 140);
If you want to get gauge's value use the following code:
var value = $('#gaugeContainer').jqxGauge('value');
The complete source code for this example is here:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>jqxGauge Basic Demo</title> <link rel="stylesheet" href="/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript"> $(document).ready(function () { $('#gaugeContainer').jqxGauge({ ranges: [{ startValue: 0, endValue: 55, style: { fill: '#C9C9C9', stroke: '#C9C9C9' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#FCF06A', stroke: '#FCF06A' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 15, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 20, startWidth: 15}], ticksMinor: { interval: 5, size: '5%' }, ticksMajor: { interval: 10, size: '9%' }, value: 0, colorScheme: 'scheme03', animationDuration: 1200 }); $('#gaugeContainer').jqxGauge('value', 140); $('#setValueButton').jqxButton({ width: 70, theme: 'classic' }); $('#getValueButton').jqxButton({ width: 70, theme: 'classic' }); $('#getValueButton').click(function () { alert(Math.round($('#gaugeContainer').jqxGauge('value'))); }); $('#setValueButton').click(function () { $('#gaugeContainer').jqxGauge('value', 220)); }); }); </script></head><body style="background:white;"> <div id="gaugeContainer"></div> <br /><br /> <div id="getValueButton" style="display: inline;">Get value</div> <div id="setValueButton" style="display: inline;">Set value</div></body></html>
<div id="gaugeContainer"></div>Insert the jQuery document ready code inside the head section of your page:
$(document).ready(function() { // jqxLinearGauge initialization code goes here.}Prepare the gauge display settings and initialize it. The code below specifies the gauge's options:
$('#gaugeContainer').jqxLinearGauge({ max: 70, min: 0, pointer: { size: '5%' }, colorScheme: 'scheme02', ticksMajor: { size: '10%', interval: 10 }, ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} }, ranges: [ { startValue: 20, endValue: 45, style: { fill: '#FFA200', stroke: '#FFA200'} }, { startValue: 45, endValue: 70, style: { fill: '#FF4800', stroke: '#FF4800'}}], value: 0});In the last step we will set jqxLinearGauge's value:
$('#gaugeContainer').jqxLinearGauge('value', 140);
If you want to get gauge's value use the following code:
var value = $('#gaugeContainer').jqxLinearGauge('value');
The complete source code for this example is here:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>jqxLinearGauge - Basic Demo</title> <link rel="stylesheet" href="/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript" src="none"></script> <script type="text/javascript"> $(document).ready(function () { $('#gaugeContainer').jqxLinearGauge({ max: 70, min: 0, pointer: { size: '5%' }, colorScheme: 'scheme02', ticksMajor: { size: '10%', interval: 10 }, ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} }, ranges: [ { startValue: 20, endValue: 45, style: { fill: '#FFA200', stroke: '#FFA200'} }, { startValue: 45, endValue: 70, style: { fill: '#FF4800', stroke: '#FF4800'}}], value: 0 }); $('#gaugeContainer').jqxLinearGauge('value', 40); $('#setValueButton').jqxButton({ width: 70, theme: 'classic' }); $('#getValueButton').jqxButton({ width: 70, theme: 'classic' }); $('#getValueButton').click(function () { alert(Math.round($('#gaugeContainer').jqxLinearGauge('value'))); }); $('#setValueButton').click(function () { $('#gaugeContainer').jqxLinearGauge('value', Math.round(Math.random() * 70)); }); }); </script></head><body class='default'> <div id="gaugeContainer"></div> <br /><br /> <div id="getValueButton" style="display: inline;">Get value</div> <div id="setValueButton" style="display: inline;">Set value</div></body></html>