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