Creating Bullet Graphs
As an example, we will create a bullet graph to show last month’s revenue, where the actual revenue will be plotted against the target revenue.
A horizontal bullet graph to plot the actual revenue and the target revenue looks like this:
{
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
},
{
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}
]
},
"value": "82",
"target": "90"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hbullet',
renderAt: 'chart-container',
id: 'rev-bullet-1',
width: '500',
height: '90',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "0",
"subCaptionFontSize": "11",
"upperLimit": "120",
"caption": "Last Month Revenue",
"subcaption": "Actual vs Target (Bakersfield Central)",
"numberPrefix": "$",
"numberSuffix": "K",
"chartBottomMargin": "25"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00",
"alpha": "25"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19",
"alpha": "25"
}, {
"minValue": "75",
"maxValue": "120",
"code": "#6baa01",
"alpha": "25"
}]
},
"value": "82",
"target": "90"
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>To create a bullet graph, you will need to:
-
Define the upper and lower limits (also known as the maximum and minimum values) for the chart.
-
Define the actual and target value. For our example, we will set the actual value to $82K and the target value to $90K.
-
Divide the specified limits into the qualitative ranges of performance - poor, satisfactory, and good and define the data for the graph. For our example, we will use the data shown in the table below:
| Range | What it means? | Color |
|---|---|---|
0-50k |
Poor |
Light Red |
50k-75k |
Moderate |
Light Yellow |
75k-100k |
Good |
Light Green |
To render the above chart as a vertical bullet graph, change the value of the type attribute to vBullet.