JQBullet Example

JQBullet Example

by NishitDhakar

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div id="chart">
    <div id="labels">
        	<h2>Number of projects completed</h2>

        	<h3>Jan-2013 to Jan-2014</h3>

    </div>
    <br/>
    <canvas id="canvas1" width="300" height="50"></canvas>
</div>

JavaScript

$(document).ready(function () {
    $("#canvas1").bullet({
        featuredMeasure: 175,
        compMeasure1: 200,
        qualScale1: 150,
        minValue: 0,
        maxValue: 350
    });
});


(function ($) {

    $.fn.bullet = function (params) { //Create the bullet plugin.

        params = $.extend({
            theWidth: this.width(),
            minValue: 0,
            maxValue: 100,
            featuredMeasure: 50,
            numberTicks: 0 //Specify the number of ticks between the first and last - unused at the moment.  (A) - add.
        }, params);
        
        //Set values
        var scaleLength = params.maxValue - params.minValue;
        var chartWidth = this.width() - 30; // 15px padding * 2 (for each side of the chart)
        var chartHeight = this.height();
        var eachUnit = chartWidth / scaleLength;
        var featuredLength = eachUnit * params.featuredMeasure;
        var comp1pos = eachUnit * params.compMeasure1;
        var qual1pos = eachUnit * params.qualScale1;

        //Set context
        var context = this[0].getContext("2d"); //Get the drawing context.

        //Drawing routine
        //Note to self:  Decimal values are percentages of the canvas element as defined in sketches.

        //Draw chart background (half of the canvas height)
        context.fillStyle = "#ababab";
        context.fillRect(15, 0, chartWidth, chartHeight * 0.50);

        //Draw qualitative scale (half of the canvas height)
        if (params.qualScale1) {
            context.fillStyle = "#cdcdcd";
            context.fillRect(15 + qual1pos, 0, chartWidth - qual1pos, chartHeight * 0.50);
        }

        //Comparative measure 1.  Only show if the parameter is provided.
        if (params.compMeasure1) {
            context.fillStyle = "Black";
            context.fillRect(15 + comp1pos - 1.5, chartHeight * 0.08, 3, chartHeight * 0.34); //1.5 is half the width of the featured marker.
        }

        //Featured measure - appears in front...