|
animationDuration
|
number
|
null
|
Sets or gets the animationDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target,animationDuration:500, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
barSize
|
string | number
|
50%
|
Sets or gets the barSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, barSize: "'40%'", theme:"light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
description
|
string
|
'Description'
|
Sets or gets the description property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, description: "Description", theme:"light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target,disabled:true, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
height
|
number
|
100
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
labelsFormat
|
string
|
null
|
Sets or gets the labelsFormat property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light", labelsFormat:"c" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
labelsFormatFunction
|
function
|
null
|
Sets or gets the labelsFormatFunction property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light", labelsFormatFunction:"labelsFormatFunction" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
orientation
|
string
|
"horizontal"
|
Sets or gets the orientation property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light", orientation:"horizontal" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
pointer
|
object
|
{ value: 65, label: "Value", size: "25%", color: "" }
|
Sets or gets the pointer property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light",rtl:true } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
ranges
|
array
|
[{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]
|
Sets or gets the ranges property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
showTooltip
|
boolean
|
true
|
Sets or gets the showTooltip property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light",showTooltip:false } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
target
|
object
|
{ value: 85, label: "Target", size: 4, color: "" };
|
Sets or gets the target property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
ticks
|
object
|
{ position: "far", interval: 20, size: 10 }
|
Sets or gets the ticks property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
title
|
string
|
'Title'
|
Sets or gets the title property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light", title:"Title" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
tooltipFormatFunction
|
function
|
null
|
Sets or gets the tooltipFormatFunction property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light", tooltipFormatFunction:"tooltipFormatFunction" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
width
|
number
|
500
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxBulletChart.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } window.onload = function() { document.querySelector( "jqx-bullet-chart").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } window.onload = function() { document.querySelector( "jqx-bullet-chart").destroy(); } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } window.onload = function() { document.querySelector( "jqx-bullet-chart").render(); } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } window.onload = function() { document.querySelector( "jqx-bullet-chart").refresh(); } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
number |
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>BulletChart 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" /> <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/jqxdata.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/jqxbulletchart.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> var ranges = [ { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 }, { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 }, { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 } ]; var pointer = { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "Black" }; var target = { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" }; var ticks = { position: "both", interval: 50, size: 10 }; JQXElements.settings[ "bulletChartSettings"] = { width:500,height:120, pointer:pointer, ticks:ticks, ranges:ranges, target:target, theme: "light" } window.onload = function() { document.querySelector( "jqx-bullet-chart").val(50); } </script></head><body> <jqx-bullet-chart settings="bulletChartSettings"></jqx-bullet-chart>
|
