Documentation

Getting Started

jqxBulletChart represents a jQuery widget which features two measures - a primary one (the pointer) and a comparative one (the target) and displays them in the context of a number of differently styled qualitative ranges.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxBulletChart widget requires the following files:

Note that jqxtooltip.js is required only if you wish the bullet chart's tooltip to be enabled.

The next step is to create a DIV element within the body of the html document.

The last step is to initialize the widget by adding the following script to the html document:

<script type="text/javascript">
    $(document).ready(function () {
        $("#jqxBulletChart").jqxBulletChart({
            width: 500,
            height: 80,
            barSize: "40%",
            title: "Revenue 2014 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 2014 YTD", size: "25%", color: "Black" },
            target: { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" },
            ticks: { position: "both", interval: 50, size: 10 },
            labelsFormat: "c",
            showTooltip: true
        });
    });
</script>

To call a function(method), you need to pass the method name and parameters(if any) in the jqxBulletChart’s constructor.

    $("#jqxBulletChart").jqxBulletChart("val", 50);

To get the result of a function(method) call, you need to pass the method name in the jqxBulletChart’s constructor and parameters(if any).

    var value = $("#jqxBulletChart").jqxBulletChart("val");

To set a property(option), you need to pass the property name and value(s) in the jqxBulletChart's constructor.

    $("#jqxBulletChart").jqxBulletChart({ disabled: true });

To get a property(option), you need to pass the property name to the jqxBulletChart's constructor.

    var height = $("#jqxBulletChart").jqxBulletChart("disabled");

To bind to an event of a UI widget, you can use basic jQuery syntax. The example code below demonstrates how to bind to the "change" event of jqxBulletChart.

    // bind to change event.
    $("#jqxBulletChart").bind("change", function (event) {
        alert("Value changed");
    });

Basic Sample

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery BulletChart Sample</title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbulletchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxBulletChart").jqxBulletChart({
                width: 500,
                height: 80,
                barSize: "40%",
                title: "Revenue 2014 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 2014 YTD", size: "25%", color: "Black" },
                target: { value: 260, label: "Revenue 2013 YTD", size: 4, color: "Black" },
                ticks: { position: "both", interval: 50, size: 10 },
                labelsFormat: "c",
                showTooltip: true
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id="jqxBulletChart">
    </div>
</body>
</html>

Documentation

Getting Started

Basic Sample

The result of the above code is: