Introduction to Bullet Graph

A bullet graph is a variation of a bar graph and serves as a light weight replacement for dashboard gauges and meters. Bullet graphs can be used in cases where space is a constraint and other gauges or widgets cannot be used.

In this section, you will be introduced to the:

Basics of Bullet Graphs

The bullet graph features a single, primary measure (for example, current year-to-date revenue), compares that measure to one or more other measures to enrich its meaning (for example, compared to a target) and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.

Types of Bullet Graphs

Bullet graphs may be oriented horizontally or vertically and multiple graphs may be stacked to allow comparisons of several measures at once.

A simple horizontal bullet graph looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "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" }

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

A simple vertical bullet graph looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "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" }

{
    "chart": {
        "theme": "fint",
        "lowerLimit": "0",
        "subCaptionFontSize": "11",
        "upperLimit": "120",
        "caption": "Last Month Revenue",
        "subcaption": "Actual vs Target<br>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: 'vbullet',
    renderAt: 'chart-container',
    id: 'rev-bullet-2',
    width: '140',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "lowerLimit": "0",
            "subCaptionFontSize": "11",
            "upperLimit": "120",
            "caption": "Last Month Revenue",
            "subcaption": "Actual vs Target<br>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>

In the above charts, the filled bar represents the actual value and the line represents the target value.

Features of Bullet Graphs

Bullet graphs allow you to:

Plot the value as a filled bar or as a dot
Show/hide axis division values
Show/hide the chart value
Customize axis limits
Customize tick marks and values
Customize plot cosmetics
Draw round color range bar