Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

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>

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.

Top