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+.

jQuery Bar Graph

Of course, there are a lot of settings to tune appearance of your graph, as are animation, color scheme, dimensions etc. Also, you can additionally change look and feel of graph via CSS.

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:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqBarGraph.js" type="text/javascript"></script>

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:

 
arrayOfData = new Array(
    [10.3,'Jan','#f3f3f3'],
    [15.2,'Feb','#f4f4f4'],
    [13.1,'Mar','#cccccc'],
    [16.3,'Apr','#333333'],
    [14.5,'May','#666666']
); 

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:

arrayOfData = new Array(
    [[14,54,26],'2007'],
    [[8,48,38],'2008'],
    [[4,36,57],'2009']
); 

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:

 
$('#divForGraph').jqBarGraph({ data: arrayOfData }); 

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.

Changelog

1.1

* Compatibility with jQuery 1.4.2+

  • Image gallery with fancy transitions effects (1023)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • News Ticker in 4 lines of jQuery (92)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code […]
  • Gradienter: Add gradient to elements (22)
    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 […]
  • mooBarGraph: AJAX graph for MooTools (17)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]

157 comments on "jqBarGraph – jQuery graph plugin"

Hi,
I am using a code which is below, but the graph is not getting generated. Please provide inputs on to where i am going wrong.
function GenerateGraph() {
var arrValue = “”;
$(‘td.ms-vb2’).filter(function (i) {
if ($(this).html().indexOf(‘Sum=’) > 0) {

mystring = $(this).html();
var result = /d+(?:.d+)?/.exec(mystring);
//console.log(arrValue)
arrValue = result[0] + “,” + arrValue
}
});
var n = arrValue.split(“,”);
document.getElementById(“value1”).innerHTML = arrValue;
debugger;
var y1 =n[0];// value of n[0] here is 120
var y2 = n[1]; value of n[0] here is 150
var x1 = “Resource”;
arrayOfDataMulti = new Array(
[[y1, y2], x1]
);

$(‘#divForGraph’).jqBarGraph({
data: arrayOfDataMulti,
type: ‘multi’,
colors: [‘#0f0′,’#F00’]
});
}

Here when i give the direct value to Y1 and Y2, the graph is getting generated on the page, but when i use this code, it gives nothing. Not even an error.

Thanks,

Aditya on April 29, 2013 at 1:19 am

I’m not sure how to do a pull request and i don’t have a github account, but i can email you a zip file of the updated code and examples if you like.

Erdrick on April 23, 2013 at 8:31 am

Hi there,
I love the simplicity of this plugin.
I was just wondering if it is possible to slightly rotate the x-labels? In my diagram they are so long that some require a second row which destroys the diagram.
I would really appreciate your help.
If there is no simple way of doing it, what would be the complicated way?
Thank you!
Lucas

Lucas on April 19, 2013 at 6:59 am

@Erdrick you can send me pull request at github and I’ll be glad to check

Lazarevic Ivan on April 19, 2013 at 3:14 am

k Mike, sent you an e-mail with some samples and updated code. Let me know if you get it or not

Erdrick on April 17, 2013 at 9:49 am

Not working with jquery-1.6.1.js , btw., great plugin!

dada on April 16, 2013 at 8:24 am

in the stacked chart, is there a way to not have the total be displayed (ie section 1 is 4, section 2 is 6, section 3 is 10, 20 shows at top, but don’t want it there) – can this be done? Also, Erdrick – your idea sounds like something I was looking for.. an this be shared? I’m at mvanmeter@gmail.com

Mike on April 12, 2013 at 12:08 pm

I’ve been working with your plugin and I’ve updated it with the ability for your graphs to be animated upon data updates to the graph. So now instead of redrawing a new graph that starts from the bottom and goes to your new heights, it now goes from your previous height values up or down to the new height values. I’ve also added in an option to allow you to override the max height of a bar encase you needed to show for blank space. Let me know if you would be interested in looking at the updated code and some samples of the implementation. Anyways Great Work on this plugin and thank you for releasing it to the community.

Erdrick on April 9, 2013 at 7:52 am

Its a great graph and working with all latest versions of jQuery.
How can I add x and y axis which showing range of values. For example say Y-axis is showing 0, 10, 20,….. ,100.

Or if you have other library to add such axis.

Thanks

Pankaj L on March 5, 2013 at 4:27 am

I constantly spent my half an hour to read this weblog’s articles all the time along with a cup of coffee.

testoboostreview.com on February 19, 2013 at 3:21 am

Version 1.1 from April 2011 is compatible with jQuery 1.8+

Lazarevic Ivan on February 18, 2013 at 4:30 pm

Your bar graph is not working with jquery 1.8+ and is giving error. Kindly update the plugin so that it will work with latest jquery versions.

Anyways, thanks for sharing your work.

Naveed Anwar on February 18, 2013 at 1:37 pm

your bar chart does not work with jquery 1.8 +

polat on February 10, 2013 at 12:13 pm

your plugin is not working with jquery 1.9

polat on February 9, 2013 at 10:00 pm

not working with jquery 1.8

santosh on January 4, 2013 at 5:20 am

HI,

i’m working in yii framework, your plugin is very easy to implement in my project, The problem is I want to use more than one simple graph in the same page, But jqBarGraph not working properly and it display the last graph I declared instead of my both graphs…

Thanks in advance.

Sathishkumar on December 29, 2012 at 1:21 am

I need to format the value have two digit in decimal part :

for example : I have number as 3.50 but when using your plugin, it’s become 3.5 , can you help me to solve this problem?

thank you so much

Nhat le on December 6, 2012 at 11:23 pm

We have used qBarGraph.1.1.js to generate a bar chart comparing 25 data points, each data point representing a different object. The bars are obviously too thin to put the names of the objects at the bottom of each bar-pair, and the best way to provide a key would be for a tooltip to appear on mouse-over. Any chance?

David Leader on November 7, 2012 at 11:54 am

Hi,
I’m using jqBarGraph with Chrome and IE8 and had getting it to work in IE8. Had to include the prototype functions for indexOf, forEach and toFixed. However after adding these to the prototype function of Array and Number object, the for in loop started including them. As a fix I had to change all the for in loop to include .hasOwnProperty check so that the prototype inheritance is not included. Is there any better workaround this?

Nandu on November 3, 2012 at 4:11 am

Hi…I am trying to figure out what is the ID of individual sub-graphs in “multi” graph type….can someone help me on that ???

Rahul Chaudhary on November 3, 2012 at 3:04 am

Hi,
I’m using Knockout and I would like to generate a graph using a Knockout Observable Array. Is this possible using this library?

regards,

Rich

richard on October 20, 2012 at 5:08 pm

Hi,

Good graph but need some settings to fix the Min height of each

bar in multiple bar graph

prabhu Raj on October 3, 2012 at 1:54 am

I’ve made two changes:
1) I added / amended the following to add a value label to the data array:

valueLabel = data[val][2];
if (valueLabel == undefined || valueLabel == “” || valueLabel == null) valueLabel = value;
color = data[val][3];

… and of course changed the actual html output to this:

prefix+valueLabel+postfix

2) I a maxValue setting to the options so I can set the scale of the chart (so if I have a contestant that never places higher than the bottom 20%, I don’t want 20% to be the top of the chart, I want 100% so you see how poor the performance is):

$.fn.jqBarGraph.defaults = {

maxValue: 0
};

max = max(data, arr.maxValue);

max = function(ar, mv){
maxvalue = mv;

my suggestion would be to make the third array item for data be a “data options” array. Then make color one of the data options, add my data label as an option, and it would then be easier to extend modifications to the data without making the data array too cumbersome.

Cheers,

jon on August 15, 2012 at 1:01 pm

Hi. great plugin. I would like to be able to display a ranking as a percentage, but display the actual rank as the data label. for example if one contestant has a rank of 10 out of 200 contestants, the data for the calculation would be (1-(10/200)) which equals 95%. I would like the label above the column to be ’10/200′. Is there any easy way to do this or do I need to edit the plugin?

Cheers,

jon on August 15, 2012 at 11:44 am

Leave a Reply

Your email address will not be published. Required fields are marked *