Introduction
jqxGauge displays an indicator within a range of values. Gauges can be used in a table or matrix to show the relative value of a field in a range of values in the data region, for example, as a KPI. It supports SVG and VML rendering.Getting Started
Include all required JavaScript & CSS files: jqxGauge uses jQuery for basic JavaScript tasks like elements selection and events handling. You need to include the jQuery JavaScript file, the jQWidgets core framework file - jqxcore.js, the main jqxChart plug-in file - jqxchart.js file, the jqxGauge plugin file jqxgauge.js and the base jQWidgets stylesheet - jqx.base.css:
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />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.<script type="text/javascript" src="../../scripts/jquery-1.11.1.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>
<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({The code above specifies the gauge's ranges, value and color scheme, animationDuration, ticksMajor and ticksMinor size and interval.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});
At last we will set jqxGauge's value:
$('#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="../../jqwidgets/styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="../../scripts/jquery-1.11.1.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" src="../../jqwidgets/jqxbuttons.js"></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>
Linear Gauge
The Linear Gauge is another type of Gauge widget which can be displayed either horizontally or vertically. In order to add the jqxLinearGauge to your web page, follow the instructions below. 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() { // jqxLinearGauge initialization code goes here.}
Prepare the gauge display settings and initialize it.
The code below specifies the gauge's options:
$('#gaugeContainer').jqxLinearGauge({In the last step we will set jqxLinearGauge's value: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', 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="../../jqwidgets/styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script><script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script><script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script><script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script><script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></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>