jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
227 lines (215 loc) • 11.4 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="Description">This demo shows some of the functionalities available in jqxBulletChart's
API.</title>
<meta name="keywords" content="API, bullet chart, bullet graph, BulletChart, chart, event, jQuery bullet graph, jQuery bullet chart, jQWidgets, jqxBulletChart, method, options, properties, property, settings" />
<meta name="description" content="This demo shows some of the functionalities available in jqxBulletChart's API." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxtooltip.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbulletchart.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bulletChart").jqxBulletChart({
width: getWidth('bulletChart'),
height: 80,
barSize: "40%",
title: "Revenue 2018 YTD",
description: "(U.S. $ in thousands)",
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 }
],
pointer: { value: 270, label: "Revenue 2018 YTD", size: "25%", color: "" },
target: { value: 260, label: "Revenue 2017 YTD", size: 4, color: "" },
ticks: { position: "both", interval: 50, size: 10 },
labelsFormat: "c",
animationDuration: 0,
showTooltip: true
});
$("#settingsExpander").jqxExpander({ width: 320, height: 600, toggleMode: "none", showArrow: false });
$("#showLabelsCheckbox").jqxCheckBox({ checked: true });
$("#nearRadio, #farRadio").jqxRadioButton({ checked: false, groupName: "position" });
$("#bothRadio").jqxRadioButton({ checked: true, groupName: "position" });
$("#currencyRadio").jqxRadioButton({ checked: true, groupName: "format" });
$("#percentRadio, #noneRadio").jqxRadioButton({ checked: false, groupName: "format" });
$("#enableAnimationCheckbox").jqxCheckBox({ checked: false });
$("#valueSlider").jqxSlider({ width: 175, min: 0, max: 300, step: 10, showTicks: false, mode: "fixed", showButtons: false, value: 270 });
var colorChoices = ["Black", "Red", "Green", "Blue", "From theme"];
$("#pointerDropDownList, #targetDropDownList").jqxDropDownList({ source: colorChoices, selectedIndex: 4, width: "100%", height: 25, autoDropDownHeight: true });
$("#disabledCheckbox, #rtlCheckbox").jqxCheckBox({ checked: false });
$("#showLabelsCheckbox").on("change", function (event) {
var checked = event.args.checked;
if (checked) {
$("#nearRadio, #farRadio, #bothRadio").jqxRadioButton("enable");
if ($("#nearRadio").jqxRadioButton("checked") == true) {
$("#bulletChart").jqxBulletChart({ ticks: { position: "near"} });
} else if ($("#farRadio").jqxRadioButton("checked") == true) {
$("#bulletChart").jqxBulletChart({ ticks: { position: "far"} });
} else {
$("#bulletChart").jqxBulletChart({ ticks: { position: "both"} });
}
} else {
$("#bulletChart").jqxBulletChart({ ticks: { position: "none"} });
$("#nearRadio, #farRadio, #bothRadio").jqxRadioButton("disable");
}
});
$("#nearRadio").on("checked", function (event) {
$("#bulletChart").jqxBulletChart({ ticks: { position: "near"} });
});
$("#farRadio").on("checked", function (event) {
$("#bulletChart").jqxBulletChart({ ticks: { position: "far"} });
});
$("#bothRadio").on("checked", function (event) {
$("#bulletChart").jqxBulletChart({ ticks: { position: "both"} });
});
$("#currencyRadio").on("checked", function (event) {
$("#bulletChart").jqxBulletChart({ labelsFormat: "c" });
});
$("#percentRadio").on("checked", function (event) {
$("#bulletChart").jqxBulletChart({ labelsFormat: "p" });
});
$("#noneRadio").on("checked", function (event) {
$("#bulletChart").jqxBulletChart({ labelsFormat: null });
});
$("#enableAnimationCheckbox").on("change", function (event) {
var checked = event.args.checked;
if (checked) {
$("#bulletChart").jqxBulletChart({ animationDuration: 400 });
} else {
$("#bulletChart").jqxBulletChart({ animationDuration: 0 });
}
});
$("#valueSlider").on("change", function (event) {
var value = event.args.value;
$("#bulletChart").jqxBulletChart("val", value);
});
$("#pointerDropDownList").on("change", function (event) {
var choice = event.args.item.label;
var newColor;
if (choice != "From theme") {
newColor = choice;
} else {
newColor = "";
}
$("#bulletChart").jqxBulletChart({ pointer: { color: newColor} });
});
$("#targetDropDownList").on("change", function (event) {
var choice = event.args.item.label;
var newColor;
if (choice != "From theme") {
newColor = choice;
} else {
newColor = "";
}
$("#bulletChart").jqxBulletChart({ target: { color: newColor} });
});
$("#disabledCheckbox").on("change", function (event) {
var checked = event.args.checked;
if (checked) {
$("#bulletChart").jqxBulletChart({ disabled: true });
} else {
$("#bulletChart").jqxBulletChart({ disabled: false });
}
});
$("#rtlCheckbox").on("change", function (event) {
var checked = event.args.checked;
if (checked) {
$("#bulletChart").jqxBulletChart({ rtl: true });
} else {
$("#bulletChart").jqxBulletChart({ rtl: false });
}
});
});
</script>
</head>
<body>
<div id="bulletChart" style="margin-left: 10px;">
</div>
<div id="settingsExpander" style="margin-top: 60px;">
<div>
jqxBulletChart settings</div>
<div>
<div style="padding: 5px;">
<div id="showLabelsCheckbox">
Show labels</div>
<ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana;
font-size: 12px;">
<li>
<div id="nearRadio">
Near</div>
</li>
<li>
<div style="margin-top: 5px;" id="farRadio">
Far</div>
</li>
<li>
<div style="margin-top: 5px;" id="bothRadio">
Both</div>
</li>
</ul>
<br />
<div>
Labels format:</div>
<ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana;
font-size: 12px;">
<li>
<div id="currencyRadio">
Currency</div>
</li>
<li>
<div style="margin-top: 5px;" id="percentRadio">
Percent</div>
</li>
<li>
<div style="margin-top: 5px;" id="noneRadio">
None</div>
</li>
</ul>
<br />
<div id="enableAnimationCheckbox">
Enable animation</div>
<br />
<div>
Pointer value:</div>
<div id="valueSlider" style="padding-left: 5px;">
</div>
<br />
<div>
Pointer color:</div>
<div id="pointerDropDownList">
</div>
<br />
<div>
Target color:</div>
<div id="targetDropDownList">
</div>
<br />
<div id="disabledCheckbox" style="margin-bottom: 5px;">
Disabled</div>
<div id="rtlCheckbox">
Right-to-left</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>