Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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..

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.

  • 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

  • Define the actual and target value. For our example, we will set the actual value to $82K and the target value to $90K.

The data structure needed to create the bullet graph to plot the actual revenue against the target revenue is given below:

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

To render the above chart as a vertical bullet graph, change the value of the type attribute to vBullet.

There! You have now seen how you can create a simple bullet graph.

Top