jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

Custom Elements

  • Javascript/jQuery
  • Angular
  • React
  • Vue
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

Custom Elements

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTagCloud
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel
  • jqxDockingLayout

jqxBarGauge

  • Default Functionality
  • Auto Change Value
  • Update Values
  • Add And Remove Values
  • Custom Tooltip
  • Negative Values
  • Sequential Growth
  • Fluid Size
Theme:
  • Demo
  • View Source
  • API Reference
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>BarGauge Custom Element NegativeValues</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" />
<meta name="description" content="In this example custom element BarGauge contains negative values" />
<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/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" src="../scripts/demos.js"></script>
<script>
JQXElements.settings['barGaugeSettings'] =
{
colorScheme: 'scheme02',
values: [12, -35, -14.78, 29.5, 23.124, 41],
max: 45,
min: -45,
baseValue: 0,
startAngle: 270,
endAngle: 90,
animationDuration: 0,
labels: {
formatFunction: (value) => {
return value + ' m';
}, precision: 1, indent: 15
}
}
</script>
</head>
<body>
<div class="example-description">
In this example custom element BarGauge contains negative values
</div>
<jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge>
</body>
</html>

Properties

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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>
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>
</body>
</html>

Events

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>
</body>
</html>

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>
</body>
</html>

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>
</body>
</html>

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>
</body>
</html>

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>
</body>
</html>

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>
</body>
</html>

Methods

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>
</body>
</html>

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>
</body>
</html>

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>
</body>
</html>

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2018. All Rights Reserved.