Bullet Chart Usage

bullet.js

// Example
// measuring performance for on-time delivery
var on_time_poor = 25;
var on_time_good = 50;
var ontime_markers = build_bullet_markers_higher_better(100, on_time_poor, on_time_good);
var on_time_percentage =  40;

draw_bullet_graph($('#ontime_placeholder'), 0, 100, null, on_time_percentage, ontime_markers, 0);

/**
* Draws a bullet graph
*
* @param {jQuery} placeholder element to put the graph in
* @param {number} min minimum value (e.g. number of euros) to cut the graph off at
* @param {number} max maxmium value (e.g. number of dollars) to cut the graph off at
* @param {number|null} target value to mark as the target within the chart, or null if not required
* @param {number} actual value to mark as the current value within the chart
* @param {Array} series Bullet graph series' for logging good/bad targets, or [] if not required
* @param {number} bonusAmount Additional amount for chart, or zero if not required
*/
function draw_bullet_graph(placeholder, min, max, target, actual, series, bonusAmount) {
    $.plot(placeholder, series, {
        xaxis: {
            min: min,
            max: max,
            ticks: 0
        },
        yaxis: {
            ticks: 0
        },
        grid: {
            minBorderMargin: 0,
            labelMargin: 0,
            axisMargin: 0
        },

        series: {
            bars: {
                show: true,
                lineWidth: 0.25,
                fillColor: {
                    colors: [{
                        brightness: 0.6,
                        opacity: 0.4},
                             {
                                 brightness: 1,
                                 opacity: 0.3}]
                }
            },
            bullet: {
                min: 0,
                max: 100,
                target: target,
                actual: actual,
                bonusAmount: bonusAmount,
                bonusColor: '#307360',
                opacity: 0.7
            }
        },
        legend: {
            show: false,
            container: '#legend',
            noColumns: 4
        }
    });
}

function build_bullet_markers_generic(max, lower_mark, higher_mark, colors, labels, graph_maximum) {
    return [
        {
            data: [
                [graph_maximum, 0, (higher_mark / 100) * max]
            ],
            color: colors[2],
            label: labels[2]},
        {
            data: [
                [(higher_mark / 100) * max, 0, (lower_mark / 100) * max]
            ],
            color: colors[1],
            label: labels[1]},
        {
            data: [
                [(lower_mark / 100) * max, 0, 0]
            ],
            color: colors[0],
            label: labels[0]}
    ];
}
/**
* Returns list of series for bullet markers where a low percentage is good
*
* @param {number} full_value Value (e.g. number of pounds) that 100% represents
* @param {number} poor_mark Fraction corresponding to the Okay/Poor boundary
* @param {number} good_mark Fraction corresponding to the Okay/Good boundary
* @param {number} [graph_maximum] Value that the graph should run up to at most.
* @return {Array}
*/
function build_bullet_markers_lower_better(full_value, poor_mark, good_mark, graph_maximum) {
    // Assumes that a good score is low
    var colors = ['#FFC800', '#FA7414', '#ED4A2D'];
    var labels = ['Great', 'Okay', 'Poor'];
    if (graph_maximum === undefined) {
        graph_maximum = full_value;
    }
    return build_bullet_markers_generic(full_value, good_mark, poor_mark, colors, labels, graph_maximum);
}

/**
* Returns list of series for bullet markers where a low percentage is bad
*
* @param {number} full_value Value (e.g. number of pounds) that 100% represents
* @param {number} poor_mark Fraction corresponding to the Okay/Poor boundary
* @param {number} good_mark Fraction corresponding to the Okay/Good boundary
* @param {number} [graph_maximum] Value that the graph should run up to at most.
* @return {Array}
*/
function build_bullet_markers_higher_better(full_value, poor_mark, good_mark, graph_maximum) {
    // Assumes that a good score is high
    var colors = ['#ED4A2D', '#FA7414', '#FFC800'];
    var labels = ['Poor', 'Okay', 'Great'];
    if (graph_maximum === undefined) {
        graph_maximum = full_value;
    }
    return build_bullet_markers_generic(full_value, poor_mark, good_mark, colors, labels, graph_maximum);
}