<!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 style="min-height:50px" >
<h3>Sunkost: Sales Target of 2013</h3>
</div>
<br />
<div >
<div style="width:30%" >
YTD Revenue
</div>
<div style="width:70%" id="bulletgraph">
</div>
</div>
<br />
<div>
<div style="width:30%">
Profit
</div>
<div style="width:70%" id="bulletgraph2">
</div>
</div>
<br />
<div >
<div style="width:30%">
Avg Order
</div>
<div style="width:70%" id="bulletgraph3">
</div>
</div>
<br />
<div>
<div style="width:30%" >
New Customers
</div>
<div style="width:70%" id="bulletgraph4">
</div>
</div>
<br />
The sales totals to date for 2013 (white horizontal line), clearly exceed the total sales for all of 2012 (the beginning of the middle range). The 2013 sales numbers suggest that our new marketing campaign is successful, resulting in increased product penetration and a significant sales boost, working our way up to the targeted goals for the whole year (vertical white lines).
<script type="text/javascript">
$(function () {
var $bulletGraph = $("#bulletgraph");
$bulletGraph.igBulletGraph({
width: "100%",
height: "80px",
ranges: [
{
brush:'#803E01',
name: 'bad',
startValue: 0,
endValue: 5000
},
{
brush: '#BA5A05',
name: 'acceptable',
startValue: 5000,
endValue: 6000
},
{
brush: '#FF7A04',
name: 'good',
startValue: 6000,
endValue: 10000
}
],
minimumValue: 0,
maximumValue: 10000,
value: 6500,
valueInnerExtent: 0.5,
valueOuterExtent: 0.65,
targetValue: 7000,
formatLabel: function (evt, ui) {
ui.label += "K";
}
});
var $bulletGraph2 = $("#bulletgraph2");
$bulletGraph2.igBulletGraph({
width: "100%",
height: "80px",
ranges: [
{
brush: '#566509',
name: 'bad',
startValue: 0,
endValue: 3000
},
{
brush: '#7F950C',
name: 'acceptable',
startValue: 3000,
endValue: 4000
},
{
brush: '#AABF31',
name: 'good',
startValue: 4000,
endValue: 10000
}
],
minimumValue: 0,
maximumValue: 10000,
value: 5000,
valueInnerExtent: 0.5,
valueOuterExtent: 0.65,
targetValue: 6000,
targetValueBreadth: 12,
formatLabel: function (evt, ui) {
ui.label += "K";
}
});
var $bulletGraph3 = $("#bulletgraph3");
$bulletGraph3.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,
formatLabel: function (evt, ui) {
ui.label += "K";
}
});
var $bulletGraph4 = $("#bulletgraph4");
$bulletGraph4.igBulletGraph({
width: "100%",
height: "80px",
ranges: [
{
brush: '#11364D',
name: 'bad',
startValue: 0,
endValue: 50
},
{
brush: '#164F6D',
name: 'acceptable',
startValue: 50,
endValue: 70
},
{
brush: '#20789F',
name: 'good',
startValue: 70,
endValue: 100
}
],
maximumValue: 100,
value: 55,
targetValue: 73,
valueBrush:"#B3E0F7",
targetValueBrush:"#B3E0F7",
targetValueOutline:"#B3E0F7",
formatLabel: function (evt, ui) {
ui.label = ui.value + "%";
}
});
});
</script>
</body>
</html>
