jQWidgets jqxBulletChart ranges Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. 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 ranges property is used to set or return the bulletchartsâs range. It accepts array type values. Its possible values are â
- âstartValueâ â It is the starting value of range.
- âendValueâ â It is the ending value of range.
- âcolorâ â It i the color of the range.
- âopacityâ â It is the opacity of the range.
Syntax:
$('.selector').jqxBulletChart({ ranges: [] });
Linked Files: Download jQWidgets from https://www.jqwidgets.com/download/ 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>
The below example illustrates the jqxBulletChart ranges property in jQWidgets:
Example:
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 ranges 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: "green" }, ticks: { interval: 50 } }); }); </ script > </ body > </ html > |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxbulletchart/jquery-bullet-chart-api.htm