Available in the Full Version
Bullet Graph - Overview
The igBulletGraph is an HTML5, canvas-based bullet graph control. It displays a single primary measure and compares to one or more other measures to create a concise data visualization.
The igBulletGraph supports a
variety of configurations and includes
animation
and tooltip features. See the complete list of samples in the menu.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Sunkost: Sales Target of 2013
YTD Revenue
Profit
Avg Order
New Customers
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).
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 the performance (value) bar, the comparative measure (target value) marker, and the dimension of the scale of the the igBulletGraph control.
Code View
Copy to Clipboard
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 + "%";
}
});
<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).
<!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>