animationDuration
|
number
|
1000
|
Sets or gets the animationDuration property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150,animationDuration:500, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
backgroundColor
|
string
|
#e0e0e0
|
Sets or gets the backgroundColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, backgroundColor: "red", theme:"light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
barSpacing
|
number
|
4
|
Sets or gets the barSpacing property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150,barSpacing:12, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
baseValue
|
number
|
null
|
Sets or gets the baseValue property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150,baseValue:30, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
colorScheme
|
string
|
scheme01
|
Sets or gets the colorScheme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, colorScheme: "scheme02", theme:"light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
customColorScheme
|
string
|
scheme01
|
Sets or gets the customColorScheme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, colorScheme: "colorScheme", customColorScheme:'{"name":"colorScheme","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}', theme:"light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150,disabled:true, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
endAngle
|
number
|
0
|
Sets or gets the endAngle property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150,endAngle:180, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
formatFunction
|
object
|
null
|
Sets or gets the formatFunction property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, formatFunction: "formatFunction", theme:"light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
height
|
number
|
400
|
Sets or gets the height property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
labels
|
object
|
null
|
Sets or gets the labels property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light", labels:labels } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
max
|
number
|
100
|
Sets or gets the max property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:60, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
min
|
number
|
0
|
Sets or gets the min property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light",min:-25 } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
relativeInnerRadius
|
number
|
0.3
|
Sets or gets the relativeInnerRadius property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light",relativeInnerRadius:0 } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
rendered
|
function
|
null
|
Sets or gets the rendered property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light", rendered:"rendered" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
startAngle
|
number
|
225
|
Sets or gets the startAngle property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light",startAngle:200 } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
title
|
object|string
|
null
|
Sets or gets the title property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light", title:"title" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
tooltip
|
object
|
null
|
Sets or gets the tooltip property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light", tooltip:"tooltip" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
useGradient
|
boolean
|
true
|
Sets or gets the useGradient property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light",useGradient:false } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
values
|
array
|
[]
|
Sets or gets the values property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
width
|
number
|
400
|
Sets or gets the width property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
|
drawEnd
|
Event
|
|
Code examples
Bind to the drawEnd event of jqxBarGauge.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } window.onload = function() { document.querySelector( "jqx-bar-gauge").addEventListener("drawEnd", function(event) { // Your code here. }); }; </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
drawStart
|
Event
|
|
Code examples
Bind to the drawStart event of jqxBarGauge.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } window.onload = function() { document.querySelector( "jqx-bar-gauge").addEventListener("drawStart", function(event) { // Your code here. }); }; </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
initialized
|
Event
|
|
Code examples
Bind to the initialized event of jqxBarGauge.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } window.onload = function() { document.querySelector( "jqx-bar-gauge").addEventListener("initialized", function(event) { // Your code here. }); }; </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
tooltipClose
|
Event
|
|
Code examples
Bind to the tooltipClose event of jqxBarGauge.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } window.onload = function() { document.querySelector( "jqx-bar-gauge").addEventListener("tooltipClose", function(event) { // Your code here. }); }; </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
tooltipOpen
|
Event
|
|
Code examples
Bind to the tooltipOpen event of jqxBarGauge.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } window.onload = function() { document.querySelector( "jqx-bar-gauge").addEventListener("tooltipOpen", function(event) { // Your code here. }); }; </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
valueChanged
|
Event
|
|
Code examples
Bind to the valueChanged event of jqxBarGauge.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values:barGaugeValues,width:600,height:600,max:150, theme: "light" } window.onload = function() { document.querySelector( "jqx-bar-gauge").addEventListener("valueChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
|
refresh
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values: "values",width:600,height:600,max:150 } window.onload = function() { document.querySelector( "jqx-bar-gauge").refresh(); } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
render
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values: "values",width:600,height:600,max:150 } window.onload = function() { document.querySelector( "jqx-bar-gauge").render(); } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|
val
|
Method
|
|
Parameter |
Type |
Description |
value |
array |
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>BarGauge 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/site.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var barGaugeValues = [11, 22, 33, 55, 88, 143]; JQXElements.settings[ "barGaugeSettings"] = { values: "values",width:600,height:600,max:150 } window.onload = function() { document.querySelector( "jqx-bar-gauge").val([112, 125, 150, 137]); } </script></head><body> <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
|