Available in the Full Version

Bullet Graph - ToolTip Settings

Task Implementation Progress

Development Task
Quality Assurance Task
Even though these tasks are executed simultaneously at the course of three weeks, initially more time has been spent on development. This is demonstrated by the progress bars’ placement amongst the three different ranges (“Low, “Medium” and “High”), that represent the level of confidence for delivering the needed results.

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 configuring of various ToolTips (default, semi-templated, and fully templated) for the igBulletGraph control.

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" />
    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

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



    <script id="rangeToolTipTemplate" type="text/x-jquery-tmpl">
        <div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:${itemBrush}">
            ${item.name}
                <br />
            Starts: ${item.startValue}<br />
            Ends: ${item.endValue}
        </div>
    </script>

    <script id="valueToolTipTemplate" type="text/x-jquery-tmpl">
        <div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:white">
            ${itemName}: ${item.value}
        </div>
    </script>

    <script id="targetValueToolTipTemplate" type="text/x-jquery-tmpl">
        <div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:white">
            Planned Time: ${item.value}
        </div>
    </script>
</head>

<body>
    <div>
        <h3 style="height: 100px">Task Implementation Progress</h3>
        <div style="height: 200px">
            <div style="width: 30%">
                Development Task
            </div>
            <div style="width: 70%" id="bulletgraph_task1" />
        </div>

        <div style="height: 200px">
            <div style="width: 30%">
                Quality Assurance Task
            </div>
            <div style="width: 70%" id="bulletgraph_task2" />
        </div>
        <div style="float: left">Even though these tasks are executed simultaneously at the course of three weeks, initially more time has been spent on development. This is demonstrated by the progress bars’ placement amongst the three different ranges (“Low, “Medium” and “High”), that represent the level of confidence for delivering the needed results.</div>
    </div>


    <script type="text/javascript">
        $(function () {
            $("#bulletgraph_task1").igBulletGraph({
                height: "80px",
                width: "100%",
                showToolTip: true,
                ranges: [
                    {
                        name: 'Low',
                        startValue: 0,
                        endValue: 40,
                        brush: "#F66656"
                    },
                    {
                        name: 'Medium',
                        startValue: 40,
                        endValue: 70,
                        brush: "#FFDA30"
                    },
                    {
                        name: 'High',
                        startValue: 70,
                        endValue: 100,
                        brush: "#72CA70"
                    }
                ],
                formatLabel: function (evt, ui) {
                    ui.label = ui.value + "h";
                },
                value: 60,
                targetValue: 80,
                targetValueBreadth: 6,
                transitionDuration: 500
            });

            $("#bulletgraph_task2").igBulletGraph({
                height: "80px",
                width: "100%",
                showToolTip: true,
                rangeToolTipTemplate: 'rangeToolTipTemplate',
                valueToolTipTemplate: 'valueToolTipTemplate',
                targetValueToolTipTemplate: 'targetValueToolTipTemplate',
                ranges: [
                     {
                         name: 'Low',
                         startValue: 0,
                         endValue: 20,
                         brush: "#F66656"
                     },
                     {
                         name: 'Medium',
                         startValue: 20,
                         endValue: 35,
                         brush: "#FFDA30"
                     },
                     {
                         name: 'High',
                         startValue: 35,
                         endValue: 50,
                         brush: "#72CA70"
                     }
                ],
                formatLabel: function (evt, ui) {
                    ui.label = ui.value + "h";
                },
                valueName: "Spent Time",
                maximumValue: 50,
                value: 23,
                targetValue: 40,
                targetValueBreadth: 6,
                transitionDuration: 500
            });
        });
    </script>
</body>
</html>