jQuery UI Widgets › Forums › Editors › ScrollBar, Slider, BulletChart, RangeSelector › customize bulletchart
Tagged: bullet chart, css, custom, customize, display, hide, jqxBulletChart, label, pointer, tick
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 4 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Authorcustomize bulletchart Posts
-
Hello jahnvi25,
Please post a link to your image so that we may better understand your requirement.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/here is the link.
Hi jahnvi25,
This can be achieved with some CSS adjustments. Here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <style type="text/css"> .jqx-bulletchart-pointer { display: none; } </style> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxBulletChart").jqxBulletChart({ width: 500, height: 80, barSize: "40%", title: "", description: "", ranges: [ { startValue: 0, endValue: 50, color: "#CC0000", opacity: 1 }, { startValue: 50, endValue: 250, color: "#FFD633", opacity: 1 }, { startValue: 250, endValue: 300, color: "#00CC00", opacity: 1 } ], pointer: { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "" }, target: { value: 100, label: "Revenue 2013 YTD", size: 4, color: "Black" }, ticks: { position: "both", interval: 50, size: 0 }, labelsFormat: null, showTooltip: true }); var labels = $(".jqx-bulletchart-labels"); for (var i = 0; i < labels.length; i++) { if (i != 0 && i != 3 && i != 12) { $(labels[i]).css("display", "none"); } } }); </script> </head> <body> <div id="jqxBulletChart"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.