jquery.bulletchart

A bullet chart plugin for jquery based on the bullet charts used in Team Foundation Server.

Configuration Defaults / Options

• title: string (optional) - title that will be added to the chart.
• subtitleFormat: string (optional) (default: ' of {1}h) - subtitle format that is applied to the subtitle. It uses the same formatting for string in C# (eq: 'Hello {0}, this is my subtitle for {1}.')
• animate: boolean (default: true) - true if you want the chart to animate when it is shown.
• current: float (required) - the current value
• total: float (required) - the total (estimated) value
• baseline: float (optional) - a given baseline

You can also use data attributes.

• data-current: current
• data-total: total
• data-baseline: baseline

Examples

The html:

<div class="row">
    <div class="span5">
        <div id="simple-bulletchart"></div>
    </div>

    <div class="span5">
        <div id="advanced-bulletchart"></div>
    </div>
    
    <div class="span5">
        <div id="bulletchart-with-data-attributes" data-current="54.5" data-total="45"></div>
    </div>
</div>

A simple bullet chart

$('#simple-bulletchart').bulletChart({
    title: 'total > current',
    current: 35.5,
    total: 45
});

An advanced bullet chart

$('#advanced-bulletchart').bulletChart({
    title: 'baseline > total > current',
    subtitleFormat: 'of {0} hours with a baseline of {1}',
    current: 32,
    total: 38,
    baseline: 42
});

Using data attributes

$('#bulletchart-with-data-attributes').bulletChart();