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 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/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>