Available in the Full Version

Bullet Graph - Using TypeScript

This sample demonstrates how to configure the performance bar, the comparative measure marker, and the dimension of the scale of the the Bullet Graph control in TypeScript.

Profit

Avg Order

New Customers

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how to configure the performance bar, the comparative measure marker, and the dimension of the scale of the the Bullet Graph control in TypeScript.

Code View

Copy to Clipboard

HTML
TypeScript

                    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
    <div>
        <div style="width:30%">
            Profit
        </div>
        <div id="bulletgraph1"></div>
    </div>
    <div>
        <div style="width:30%">
            Avg Order
        </div>
        <div id="bulletgraph2"></div>
    </div>
    <div>
        <div style="width:30%">
            New Customers
        </div>
        <div id="bulletgraph3"></div>
    </div>
    <script src="/TypeScriptSamples/bullet-graph/typescript.js"></script>
</body>
</html>

             /// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />


$(function () {
    $("#bulletgraph1").igBulletGraph({
        width: "100%",
        height: "80px",
        ranges: [
            {
                brush: '#803E01',
                name: 'Bad',
                startValue: 0,
                endValue: 3000
            },
            {
                brush: '#BA5A05',
                name: 'Acceptable',
                startValue: 3000,
                endValue: 4000
            },
            {
                brush: '#FF7A04',
                name: 'Good',
                startValue: 4000,
                endValue: 10000
            }
        ],
        minimumValue: 0,
        maximumValue: 10000,
        value: 5000,
        valueInnerExtent: 0.5,
        valueOuterExtent: 0.65,
        targetValue: 6000,
        targetValueBreadth: 12,
        showToolTip: true,
        formatLabel: function (evt, ui) {
            (<HTMLOptGroupElement>ui).label += "K";
        }
    });

    $("#bulletgraph2").igBulletGraph({
        width: "100%",
        height: "80px",
        ranges: [
            {
                brush: '#566509',
                name: 'Bad',
                startValue: 0,
                endValue: 250
            },
            {
                brush: '#7F950C',
                name: 'Acceptable',
                startValue: 250,
                endValue: 300
            },
            {
                brush: '#AABF31',
                name: 'Good',
                startValue: 300,
                endValue: 500
            }
        ],
        minimumValue: 0,
        maximumValue: 500,
        value: 350,
        valueInnerExtent: 0.35,
        valueOuterExtent: 0.8,
        targetValue: 400,
        showToolTip: true,
        formatLabel: function (evt, ui: HTMLOptGroupElement) {
            ui.label += "K";
        }
    });

    $("#bulletgraph3").igBulletGraph({
        width: "100%",
        height: "80px",
        ranges: [
            {
                brush: '#11364D',
                name: 'Bad',
                startValue: 0,
                endValue: 5
            },
            {
                brush: '#164F6D',
                name: 'Acceptable',
                startValue: 5,
                endValue: 20
            },
            {
                brush: '#20789F',
                name: 'Good',
                startValue: 20,
                endValue: 100
            }
        ],
        maximumValue: 100,
        value: 15,
        targetValue: 25,
        valueBrush: "#B3E0F7",
        targetValueBrush: "#B3E0F7",
        targetValueOutline: "#B3E0F7",
        showToolTip: true,
        formatLabel: function (evt, ui: HTMLOptGroupElement) {
            ui.label = ui.label + "%";
        }
    });
});

Ignite UI for jQuery | Samples

Search Results

Bullet Graph - Using TypeScript

Code View