JQuery Horizontal Bar Chart Plugin

This is a very simple bar chart plugin using unordered lists and divs. You can populated the data either statically using data-dash attributes for the

items or you can add it inline in the data: option of the plugin. If you use the data-dash attributes the plugin assumes that it takes priority and overrides the data: option of the plugin. The plugin allows you to easily change css styles for the auto generated

,

and elements it creates. This is a very simple plugin with a handful of options. If you are looking for something really comprehensive this probably isn’t it. The purpose of this plugin is to quickly make a simple bar graph that shows a percentage based on some calculation. Essentially the value you supply for the bar is calculated against the size of the bar (either specified or auto generated based on element width). Obviously this could be extended quite a bit and rather easily so have at it. The reason I created this plugin is that the majority of the chart type plugins out there are far more complicated than I needed for this simple task. Hence the focus was to keep it as simple as possible while providing a handful of anticipated options for reuse in projects. The plugin does provide the ability to callback.

Download: DOWNLOAD

Below is an example of what it might look like.

First add some css. Again you can change the css style names to your liking in the plugin.


.quickbar { padding: 0px; margin: 0px; list-style: none; } /* this is the actual ul */
.quickbar li { padding: 5px 0px 5px 0px;}
.quickbar-container { background-color: #F3F3F3; display: block; line-height: 20px; overflow: hidden; border: 1px solid #EAEAEA;
border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; } /* this is the wrapper around the bar. */
.quickbar-bar { background-color: #2E3192; width: 0px;} /* this is the bar itself you could use an image here if you wanted */
.quickbar-title { padding: 3px; } /* this is the element above, left or below the bar.*/
.quickbar-label { padding-left: 6px; float: left; position: relative; font-size: .9em; } /* this is the label that goes to the right or inside the bar */


For the HTML markup you have two options the first couldn’t get any easier.

The second utilizes data-dash attributes. If you are familiar with unobtrusive javascript these will make perfect sense. Hence if you rendered your markup and grabbed data from your database or something you can just add the attributes directly as opposed to supplying them in javascript. Just makes it handy.In this example you have to create the

elements. The title is what is displayed again on top, to the left or below the bar itself. The value is the integer value that will be used to calculate against the with of the element to properly show the percentage of use. The label is what shows inside the bar or to the right to further describe what the bar value means. For ex: 75% free. The width is a specified with. Yes you can have each

be a different width which is handy is some situations. The width can also be 0. You would need to create each li with:

data-quickbar-title=”title”
data-quickbar-value=”value”
data-quickbar-label=”label”
data-quickbar-width=”200″

For the Javascrpt. Reference the plugin as you normal would for any plugin in your header tag.

Wire up the plugin to your element.

$(document).ready(function () {
var chartData = [ { title: ‘your_title’, value: ‘your_value’, label: ‘your_label’, width: 200}, { title: ‘your_title2’, value: ‘your_value2’, label: ‘your_label2’, width: 200} ]
$(‘.quickbar’).quickbar({
styles: { container: ‘quickbar-container’, bar: ‘quickbar-bar’, title: ‘quickbar-title’, label: ‘quickbar-label’ },
title: { visible: true, width: 50, position: ‘left’ }, // position options are ‘top’, ‘left’, ‘bottom’. Defaults: true, 50, ‘left’.
label: { visible: true, width: 50, position: ‘right’ }, // position options are ‘inner’ or ‘right’. Defaults: true, 50, ‘right’.
refresh: { btn: ‘.quickbar-refresh’, method: ”}, // this is only need to call a function to repopulate and reinit the plugin with new data.
data: chartData, // this can be static, empty (if using data-dash attribute) or a function.
animate: true, // can be true or false. Default: true.
});
});

You could also use the built in destroy or reinit methods.

$(‘.quickbar’).quickbar(‘destroy’); // destroys the plugin and removes any auto generated elements. (manual data-dash elements will NOT be removed).
$(‘.quickbar’).quickbar(‘reinit’); // destroys and reinitializes the plugin.

You could populate the data using an ajax call.

function buildChart(){
$.post(‘/your_path/method’, { variable: ‘variable’, variable2: ‘variable2’ },
function (result){
// creates a new quickbar.
var opt = {
title: { width: 100, position: ‘top’ },
data: $.parseJSON(result)
}
var callback = function () { // some function. };
$(‘.quickbar’).quickbar(opt, callback);
}

}