|
animationDuration
|
number
|
400
|
Sets or gets the animationDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
border
|
object
|
{ size: '10%', style: { stroke: '#cccccc'}, visible: true, showGradient: true }
|
Sets or gets the border property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", border:"border" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
caption
|
object
|
{ value: '', position: 'bottom', offset: [0, 0], visible: true }
|
Sets or gets the caption property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", caption:"caption" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
cap
|
object
|
{ size: '4%', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' } , visible: true }
|
Sets or gets the cap property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", cap:"cap" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
colorScheme
|
string
|
'scheme01'
|
Sets or gets the colorScheme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", colorScheme:"scheme01" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",disabled:true } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
easing
|
string
|
linear
|
Sets or gets the easing property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", easing:"linear" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
endAngle
|
number
|
270
|
Sets or gets the endAngle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",endAngle:250 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
height
|
number
|
350
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",height:400 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
int64
|
boolean
|
false
|
Sets or gets the int64 property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",int64:true } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
labels
|
object
|
{ distance: '38%', position: 'none', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) { return value; }}
|
Sets or gets the labels property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", labels:labels } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
min
|
number
|
0
|
Sets or gets the min property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",min:10 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
max
|
number
|
220
|
Sets or gets the max property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",max:210 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
pointer
|
object
|
{ pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, length: '70%', width: '2%', visible: true }
|
Sets or gets the pointer property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", pointer:pointer } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
radius
|
number
|
'50%'
|
Sets or gets the radius property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",radius:150 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
ranges
|
array
|
[]
|
Sets or gets the ranges property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
startAngle
|
number
|
30
|
Sets or gets the startAngle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",startAngle:40,endAngle:200 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
showRanges
|
boolean
|
true
|
Sets or gets the showRanges property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",showRanges:true } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
style
|
object
|
{ fill: '#ffffff', stroke: '#ffffff' }
|
Sets or gets the style property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", style:"style" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
ticksMajor
|
object
|
{ size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
|
Sets or gets the ticksMajor property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
ticksMinor
|
object
|
{ size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
|
Sets or gets the ticksMinor property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
ticksDistance
|
string
|
'20%"
|
Sets or gets the ticksDistance property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light", ticksDistance:"'50%'" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
value
|
number
|
0
|
Sets or gets the value property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:100, theme: "light" } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
width
|
number
|
350
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light",width:300 } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
|
|
valueChanging
|
Event
|
|
Code examples
Bind to the valueChanging event of jqxGauge.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light" } window.onload = function() { document.querySelector( "jqx-gauge").addEventListener("valueChanging", function(event) { // Your code here. }); }; </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
valueChanged
|
Event
|
|
Code examples
Bind to the valueChanged event of jqxGauge.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { ticksMinor:ticksMinor, ticksMajor:ticksMajor, ranges:ranges,value:60, theme: "light" } window.onload = function() { document.querySelector( "jqx-gauge").addEventListener("valueChanged", function(event) { // Your code here. }); }; </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
|
|
disable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { } window.onload = function() { document.querySelector( "jqx-gauge").disable(); } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
enable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { } window.onload = function() { document.querySelector( "jqx-gauge").enable(); } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
number |
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Gauge Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgauge.js"></script> <script type="text/javascript"> var ranges = [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 }, { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 }, { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 }, { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }] var ticksMinor = { interval: 5, size: '5%' }; var ticksMajor = { interval: 15, size: '10%' } JQXElements.settings[ "gaugeSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-gauge").val(); } </script> </head><body> <jqx-gauge settings="gaugeSettings"></jqx-gauge>
|
