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:

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:

• 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:

• JSON
• XML

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