jQWidgets jqxBulletChart target Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a comparative one and displays them in the context of a number of differently styled qualitative ranges.
The target property is used to set or return the bulletchartsâs target. It accepts object type value and its default value is
{ value: 85, label: "Target", size: 4, color: "" }
Syntax:
$('.selector').jqxBulletChart({ target: object });
Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.
<link rel=âstylesheetâ href=âjqwidgets/styles/jqx.base.cssâ type=âtext/cssâ />< <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbulletchart.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
Example: The below example illustrates the jqxBulletChart target property in jQWidgets.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" type = "text/css" /> < script type = "text/javascript" src = "scripts/jquery-1.11.1.min.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxcore.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxdraw.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxdata.js" ></ script > < script type = "text/javascript" src = "jqwidgets/jqxbulletchart.js" ></ script > < script type = "text/javascript" src = "jqwidgets/jqxtooltip.js" ></ script > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h3 > jQWidgets jqxBulletChart target Property </ h3 > < div id = "gfg" ></ div > </ center > < script type = "text/javascript" > $(document).ready(function () { $('#gfg').jqxBulletChart({ width: 700, height: 100, barSize: "60%", title: "w3wiki", description: "Computer science portal", ranges: [ { startValue: 0, endValue: 100, color: "red" }, { startValue: 100, endValue: 200, color: "blue" }, { startValue: 200, endValue: 300, color: "yellow" } ], pointer: { value: 250, color: "green" }, target: { value: 230, color: "red" }, }); }); </ script > </ body > </ html > |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbulletchart/jquery-bullet-chart-api.htm
Contact Us