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 (1025)
    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"

Great bar graph. One issue though. Another js library I am using adds a remove prototype to the Array so that when the bar graph script iterates the array it finds a property called “remove”.

for (var val in data) { … }

You could probably add something like this to get around this

if (data.hasOwnProperty(val)) {

}

Stuart Thomson on July 26, 2012 at 6:14 am

Brain you can use the parameters in it to change the width and height this graph is really very user friendly and easy to implement šŸ™‚

Rashid Imran BIlgrami on July 16, 2012 at 6:36 pm

Great Articles and nice website, i have implement your graph and its works awesome with my APPS but i found one issue the the value is -ve then it will not display any thing

Can you give me a clue i can update it

Rashid Imran BIlgrami on July 16, 2012 at 6:35 pm

Hi,

thanks for this very nice bargraph plugin. Is there any possibility of plotting zero values in multi graph? Please suggest.
thanks.

Deja on June 30, 2012 at 5:55 am

when more time refresh my page then legend will be shown more times in multi bargraph

Addon on June 25, 2012 at 5:30 am

Great plugin, but would it be possible to not use background colours so that the charts can be printed? Most browsers won’t print background colours by default.

Matthew Lock on June 19, 2012 at 10:02 pm

I love this bar graph. Is it possible to do horizontal graphs.

PI

Philip Isaacs on June 14, 2012 at 9:34 am

Hey,

I am relatively new to jQuery and I was wondering if there is any way to change the widths and heights from pixels to %.

Thanks for your time,

Brian

Brian on June 3, 2012 at 3:34 pm

Hi Lazarevic Ivan,
First of all thanks for such a nice script for graph…
I am new in programming, I just want to know how can i generate data array using php/mysql.
I hope you help me to solve my issue (Sorry for my bad english)

Ajay on April 12, 2012 at 12:18 pm

How do I,Values over graphics bar on Multi-graphic.

Tks.

Gilbert on March 30, 2012 at 10:57 am

Hi,

I love this plugin….BUT!

When you turn off javascript, the plugin breaks. This is obvious, but its a shame it doesnt degrade nicely, like for example showing the infomration in a table. Is this something that could happen?

James on March 8, 2012 at 7:57 am

is not going on JSP upon Spring security:

<script type="text/javascript" src="”>
<script type="text/javascript" src="”>

arrayOfDataMulti = new Array(
[[14,44,26],’2007′],
[[18,38,38],’2008′],
[[24,32,57],’2009′]
);

$(‘#exampleMulti’).jqBarGraph({
data: arrayOfDataMulti,
colors: [‘#242424′,’#437346′,’#97D95C’] });

Andrey on March 7, 2012 at 4:07 pm

You can hide totals from the top with CSS. I think this should be enough .ID_OF_GRAPHgraphValue { display: none }

Lazarevic Ivan on February 11, 2012 at 2:34 pm

Great Graphs,
How do I remove the totals at the top of the columns?

BK on February 8, 2012 at 10:02 am

@Will
There’s no plans for vertical bars for now.

@Scott
Try to first clear jqBarGraph container on button click. Something like $(‘#divForGraph’).html(”)

@Raj
Options for printing background colors is disabled in browser by default. Only way that I know for printing background colors is to enable that option.

Lazarevic Ivan on January 30, 2012 at 9:18 pm

Hello Friend,

Thanks for publishing fantastic Bar Charts. It works fine in IE 7 also.

One comment : I could not print these charts in IE / Chrome. It just shows the number in printed output. When you get a chance, please review and let us know your comments.

Thanks and Regards,
Raj

Raj on January 29, 2012 at 1:29 am

I have tied this plugin to a form calculator that supplements the array data with var data = [
[parseInt($(‘#one’).text()), ‘ROI w/ Local Spending’],
[parseInt($(‘#two’).text()), ‘ROI w/o Local Spending’]
]; When you press the ‘Calculate’ button it runs the function, but if the button is pressed more than once the bar graph starts stacking text on top of itself. Any ideas how to reset and/or stop this?

Scott on January 3, 2012 at 2:56 pm

Is there any easy solution to make this display with the bars stacked horizontally? It doesn’t appear so when looking through the source (it looks like most of the code is written presuming a vertical display of the bars). If not is this possibly planned for a future update?

Will on December 29, 2011 at 11:34 am

Near line 180 there is a bug with stacked bar graphs. If one of the stacked bars has the value zero, the zero will still display as if that sub bar exists, overlapping with the next bar that has a non-zero value. This renders the overlain values unreadable. Here is a simple fix. ā€“ Add the line with the comment.

if (arr.showValues) {
sv = arr.prefix+valueData[i]+arr.postfix;
if (sv == 0) { sv = ”; } // eliminates zero overlap for bars that don’t exist.
fs = 12;
}

Brian on November 30, 2011 at 3:08 pm

Hi Lazarevic Ivan,

I am a fresher to the bargraph,
my question is, after adding the two js files where the array should be added can you please explain me with the code.

vikas on November 2, 2011 at 5:25 am

This is great, just what I was looking for.

Swot template on October 31, 2011 at 7:16 pm

oops… my code was stripped out of the above post, let’s give this a try…

Find this line:
div class=’graphValue”+el.id+”‘ id=’graphValue”+unique+”‘

Change to:
div class=’graphValue”+el.id+”‘ id=’graphValue”+unique+”‘ style=’position:relative; left:”+space/2+”px;’

Find this line:
div class=’graphBar”+el.id+”‘ id=’graphFieldBar”+unique+”‘ style=’background-color:”+color+”;position: relative; overflow: hidden;’

Change to:
div class=’graphBar”+el.id+”‘ id=’graphFieldBar”+unique+”‘ style=’background-color:”+color+”;position:relative; left:”+space/2+”px; overflow: hidden;’

Find this line:
div class=’graphLabel”+el.id+”‘ id=’graphLabel”+unique+”‘

Change to:
div class=’graphLabel”+el.id+”‘ id=’graphLabel”+unique+”‘ style=’width:”+fieldWidth+”px;’

After making the changes add this to your style sheet and customize the style to your taste:
.graphLabeljqGraph {
border-top: solid 4px black;
}

Jacob D on October 30, 2011 at 2:04 pm

This is an excellent plugin. The small footprint is fantastic. With just a few simple changes it’s possible to add a nice baseline to the graph, which I think really completes the appearance…

Find this line:

Change to:

Find this line:

Change to:

Find this line:

Change to:

After making the changes add this to your style sheet and customize the style to your taste:
.graphLabeljqGraph {
border-top: solid 4px black;
}

example of the result here (scroll down, click the button): http://hikeitlikeit.com/2011/photography-and-backpacking-3/

It would be nice to see these changes implemented into the plugin with an additional parameter added to specify the baseline color & thickness. Making those changes was a bit more than I wanted to tackle though šŸ™‚

Cheers!
Jacob.

Jacob D on October 30, 2011 at 2:02 pm

Nice presentation!

Is it possible with this plugin to have horizontal graphs?

Bruce Kessel on October 10, 2011 at 12:57 pm

I was finding that all totaled numbers, regardless of decimal or not, were being totaled with “.00” because of the toFixed() function. I replaced that with the following:


myToFixed = function (n, digits) {
digits = digits || 0;
return n.toFixed(digits).replace(new RegExp("\.0{" + digits + "}"), "");
}

This allows me to pass rounded whole numbers as follows:

myToFixed(32.1212, 2) –> “32.12”
myToFixed(32.1212, 0) –> “32”
myToFixed(32, 2) –> “32”
myToFixed(32.1, 2) –> “32.10”

and get the desired result.

function per : http://stackoverflow.com/questions/1393332/javascript-tofixed-function

Ben Styles on August 24, 2011 at 2:59 am

Leave a Reply

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