This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 9 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • customize bulletchart #56962

    jahnvi25
    Participant

    how can i customize bullet chart which shows in image below..
    basically.. only display certain labels and target value only..

    customize bulletchart #56992

    Dimitar
    Participant

    Hello jahnvi25,

    Please post a link to your image so that we may better understand your requirement.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    customize bulletchart #57011

    jahnvi25
    Participant
    customize bulletchart #57034

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.