jqBarGraph – jQuery graph plugin
jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
You will need jQuery in order to make jqBarGraph working. First, you need to download jQuery and jqBarGraph plugin and include them on your page. Similar to this:
Now, we need array of data from which we want to create graph. There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.
For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. This is example for simple bar graph type:
For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, …, valueN], label]. It should look similar to this:
After you set your data array you just need to say in which div you want graph to be created. All you have to do is:
The code above is enough to display your data as bar graph. But if you want to made your graph prettier you can achieve that with next set of parameters:
data: arrayOfData, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#000000', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
showValuesColor: '#fff' // color of font for values
This graph will work without any additional CSS, but it can easily be styled via CSS. I was paying attention that you will have enough selectors to achieve anything you want with CSS. If you create something cool it will be nice if you share that with all of us.
* Compatibility with jQuery 1.4.2+
» Trackbacks and pingbacks click to expand
Coin Slider: Image Slider with Unique Effects
After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider. Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. […]
HTML5/CSS3 Circle Music Player
More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed. [He have more great designs which you’ll see if you go to […]
Gradienter: Add gradient to elements
Last night I started to work on WordPress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that that’s very boring to do manually, I’ve decide to write jQuery plugin which will do that job. Gradienter is […]
Coin Slider 4 WordPress
Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery’s Coin Slider. Implementation is very easy, after you download and activate this plugin, just paste one line of code in your template and Coin Slider 4 WP is ready to use.