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.



Comments

  1. tplaner
    December 18, 2009

    Excellent plug-in well designed and coded for displaying basic bar charts. I really like how browser compatible these bar charts are since they do not rely on the canvas element.

    One question though, I was wondering how you would go about updating the charts in semi-real-time? For example if you had animation set to false, how would you then simply add to the data set on the screen?

    I attempted to simply modify the data and pass it back to the jqBarGraph function, however it doesn’t seem to be working correctly (I end up with overlapping text).

  2. Lazarevic Ivan
    December 18, 2009

    That’s a good question tplaner. For now, you should clear graph container div before drawing new graph. Something similar is done on jqBarGraph’s page examples part. This is code snippet from there.

    $(’#multiSortDesc’).click(function(){
    $(’#exampleMulti’).html(”);
    $(’#exampleMulti’).jqbargraph({ data: arrayOfDataMultiForSort });

    });

    Thanks for feedback. I’ll fix this in next release.

  3. Ozren
    February 17, 2010

    Odličan plugin. Jednostavan za koristenje, super izgleda…

  4. Pravin
    March 3, 2010

    Thanks for developing such a good plugins.
    I need help regarding the arrayOfData. In our example we have to generate arrayOfData using jsp file. So how can I get the arrayOfData as a Ajax response.

    Please help me out.

  5. Lazarevic Ivan
    March 4, 2010

    Pravin, after Ajax response on success just create graph again with data from response.

  6. Predic
    March 15, 2010

    Stvarno dobar plugin. Svaka cast..
    Naisao sam na jedan problem: Kada jednom iskoristim hide() na elementu kome grafik pripada,grafik se vise ne prikazuje, naravno isto je i iz css-a display:none

    Primer:

    Dakle, kada sakrijem prvi_blok a kasnije zelim da ga prikazem, grafik se jednostavno izgubi.
    Kod prikaza sam koristio jednostavno show() ili toggle()

    U cemu je problem? Mozda negde gresim

  7. Philip
    April 8, 2010

    Is it possible to reverse the order of the legend so that the legend match the sequence of the stacked graph?

  8. Lazarevic Ivan
    April 11, 2010

    Philip, there is no option for that, but you can change source code if you know how to achieve that. If you need help feel free to contact me.

  9. M A Hossain Tonu
    April 12, 2010

    Hi, Nice work there.
    But one thing , what about X and Y grid view?

  10. Lazarevic Ivan
    April 13, 2010

    You can add grids as background image. I know that it’s not a perfect solution : )

  11. erica
    May 11, 2010

    Great plug-in, thanks!

    Question is there a way to make it a horizontal graph?

    Thanks again!

  12. Dario Villanueva
    June 4, 2010

    Fantastic plugin, It’s really clean and beautifully animated. It’d be great however if you could add an option to define the scale, i.e. the maximum value. I’m making a page with a lot of independent graphs that scale automatically according to their own dataset, but i’d want them to all scale the same so they could be comparable. Other than that, fantastic plugin A++++

    Cheers!

  13. Roly
    June 9, 2010

    Now this is a JS charting tool that can take on the Flash equivalents. Well done!! This is the only solution we have found that contains animation similar to FusionCharts. Do you have plans to develop other charts eg line chart?

    We have looked at so many JS solutions of charts that work on the iPhone/Safari browser but none of them work as good as this. Graphael come very close (and that very impressive) but it’s not animated and let’s face it, that’s what users want to see.

    Cheers,
    Roly.

  14. Lazarevic Ivan
    June 13, 2010

    @Dario Villanueva
    Height will define maximum value, maybe you can use that.

    @Roly
    I didn’t have a chance to test it on iPhone, I’m glad that works fine.

    Thanks for comments, I really appreciate it.

  15. John A
    July 6, 2010

    Thanks for the plugin, but I was running into issues with it. After some testing I found the cause of the issue to be that I am using the graph within a jquery tab, where the contents of the tab is loaded from another page. I tracked the issue down to jquery’s ui-tabs.css file; “.ui-tabs .ui-tabs-hide { display: none !important; }” If this line is removed the graphs work fine but then the tabs do not work properly. I’m going through the web source code and it looks like jqBarGraph could not determine the height or width properly. I will look at the jqBarGraph source code and try to patch this but if you have heard of this and have a quick solution i would really appreciate it.
    Thank you!

  16. John A
    July 6, 2010

    Looks like the height and width were not being picked up correctly when using this plugin inside a jquery tab.
    I made the following changes, which seems to fix the issue, but I have not yet fully tested it.

    - fieldWidth = ($(el).width()-legendWidth)/data.length; //width of bar
    - totalHeight = $(el).height(); //total height of graph box

    + fieldWidth= $(el).css(’width’);
    + var strLen = fieldWidth.length;
    + fieldWidth= fieldWidth.slice(0,strLen-2);
    + fieldWidth=(fieldWidth-legendWidth)/data.length;
    + totalHeight = $(el).css(’height’); //total height of graph box
    + var strLen = totalHeight.length;
    + totalHeight= totalHeight.slice(0,strLen-2);

  17. Peter
    July 15, 2010

    I am trying to load data from an HTML form into your fantastic programme, without success. I am using the following:
    $(form).click(function (gamblegram) {

    var allInputs = $(”:input”);

    stackedTestData = new Array (
    [[Na,pott,Ca,Mg], ‘Cations’],
    [[Cl,HCO3,phosphate,lactate], ‘Anions’]

    ]
    );
    $(”#actualData”).jqBarGraph({
    data: stackedTestData,
    colors: ['#242424','#437346','#97D95C,#CC0066','#FF9900','#6600CC, #33FF99'],
    legends: ['Na','K','Ca','Mg','Cl','HCO3','phosphate','lactate'],
    legend: true,
    width: 200,
    prefix: ”,
    postfix: ”,
    title: ‘gamblegram anions and cations’
    });
    }
    Could you possibly find time to help, please

  18. Lazarevic Ivan
    July 15, 2010

    @Peter
    You have to set values.

  19. Peter
    July 15, 2010

    Further to my post this morning, I can now graph data entered into a form. I have inserted eval(form.data item.value); which transfers the value to the array. Works brilliantly. When I click ‘graph’ the function is called and the graph appears.
    My data are divided into two sets each with four numbers: although the legend displays eight different colours each corresponding to a different piece of data, the stacked bargraph shows the same colours on each column i.e. colours corresponding to the first four pieces of data in array one for both arrays. How can one change it so that each piece of data in the separate arrays is coloured differently in the graph?
    Otherwise brilliant
    Thanks

  20. Peter
    July 25, 2010

    Is there a way to modify your plugin to make the second of two arrays have different colours from the first?

  21. Lazarevic Ivan
    July 25, 2010

    Peter, I’m not sure what you want to achieve. It seems to me that you can draw two separated graphs and just show/hide them. Can you provide me example?

  22. Peter
    July 30, 2010

    How do I get the example to you?

  23. Peter
    July 31, 2010

    gamblegram

    h2 {
    font-family:comic sans MS;
    }
    h3 {
    font-family:comic sans MS;
    color:#CC0066;
    }
    legend {
    font-family:comic sans MS;
    }

    function tabElement(xForm,xElem,evt) {
    var keyCode = (evt) ?evt.keyCode: ((window.event) ? event.which: null);
    if(keyCode==13) {
    xForm[xElem].focus();
    return false;
    }
    else return true,
    }

    gamblegram:the anion gap

    Enter Data

    Na+
    Ca2+

    K+
    Mg2+

    Cl-
    phosphate3-

    HCO3
    lactate-

    $(form).click(function () {

    Na = eval(form.Na.value);
    pott = eval(form.pott.value);
    Cl = eval(form.Cl.value);
    Ca= eval(form.Ca.value);
    Mg= eval(form.Mg.value);
    Cl= eval(form.Cl.value);
    HCO3= eval(form.HCO3.value);
    phos= eval(form.phos.value);
    lactate= eval(form.lactate.value);

    ionData = new Array (
    [[Na,pott,Ca,Mg], ‘Cations’],
    [[Cl,HCO3,phos,lactate], ‘Anions’]
    );
    $(’#graph’).jqBarGraph({
    data: ionData,
    colors: ['#242424','#437346','#97D95C','#CC0066','#FF9900','#6600CC','#33FF99','#cc0099'],
    legends: ['Na','K','Ca','Mg','Cl','HCO3','phosphate','lactate'],
    legend: true,
    width: 200,
    showValuesColor:true,
    title: ‘gamblegram anions and cations’
    });
    });

    As you will see the legend comes up with each item a different colour. I would like the stacked bars to choose those colours for each different item as well
    Peter

  24. Lazarevic Ivan
    August 14, 2010

    Ok, now I understand what you need. Unfortunately, it can’t be done with jqBarGraph.

  25. Shrihari
    August 26, 2010

    Eyed-piece work

    i need to have a line graph with a stacked one(combination of both), have any type of this one ?


Leave a Reply



Trackbacks and pingbacks
click to expand

  1. [...] is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info [...]

  2. [...] jqBarGraph – jQuery graph plugin [...]

  3. [...] Great looking bar graphs with jQuery. Learn more about it here. [...]

  4. [...] jqBarGraph. Graphs are a great way to present data and thanks to jqBarGraph now you can display graphs with jQuery. Currently the plugin supports only three types of graphs: simple, multi and stacked but for many situations this is just what you need. The jqBarGraph plugin works under all major browsers. [...]