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+.
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+
Didn’t work with last jquery library(1.4.4)can you fix and reply me to my mail?
The plugin doesn’t work with the latest version of Jquery (1.4). You can use Jquery 1.2
Hello,
Your plugin is great, I have just a little problem with the following code in IE.
All the vertical values are equals to 0, and your plugin does not appréciate.
Any idea?
dataArray = new Array(
[0, ‘octobre 2010’]
,[0, ‘novembre 2010’]
,[0, ‘décembre 2010’]
,[0, ‘janvier 2011’]);
$(‘#divForGraph’).jqBarGraph({
data: dataArray,
width: 500,
height: 500,
colors: [‘#122A47′,’#1B3E69’],
color: ‘#1A2944’,
barSpace: 10,
title: “Nb de SMS MO traités en moins de 180 s “,
speed:1
});
a real attractive & sexy plugin, thanks!
but i met the same question as Dave said.
i use jQuery 1.4.4, no graph bar appear.
pls help
Hey Ivan, thanks for crafting this awesome plugin. Have you experienced any problems running it on jQuery 1.4.3 and higher? There are no errors in the console but when 1.4.3 or higher is used, the bar graphs do no appear (yet the keys do). Any thoughts as to why?
a tried pretty much everything but at the end i came here. 😉
showValues: false has nothing with this what i need…if i use this numbers are just not diplay…here is an example why a need values on the top of the bars http://imgur.com/TcrGz
PS: ako mozes da mi odgovoris na email 😉 pozz i sretna nova godina
Boris, I’m not sure if this is what you need but try to set showValues: false
hy ivan
nice plugin for graphs.. i would like to know if there is any option to display values in multi bar type on the top (like in Simple bar graphs) not in bars. tnx for helping pozz
Hi!
a very good plug in! I am very happy ..
Is it also possible to stack the horizontal bar?
That’s the only thing I still lack 😉
Mic
Made some minor additions:
1. Added param ‘graphTotalValue: true|false’ to show / hide the total value of the graph that is automatically generated and placed atop the graph
2. Assigned individual numbered id’s to each subBar so that you can get it’s coords
More info on this at:
http://hciguy.wordpress.com/2010/09/27/jqbargraph-mod/
Download at:
http://code.google.com/p/jqbargraph/issues/detail?id=2
@johan – because I’ve given each subBar an individual div, you could make each clickable. But Ivan Lazarevic is correct, mooBarGraph does do this by default.. although I’ve had a much better experience with JqBarGraph modifying code
It’s possible with mooBarGraph [ http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/ ]
Hi!
Is it possible to make a stacked bar clickable? So that when I click the text or green field 2006/$2k, I get refered to a page that tell me what the $2k mean.
What I want is every item in one stack to be uniquely clickable.
Possible?
@Shrihari
No, this is only for bar graphs.
@SMIT
I think that there is suggested solution for that problem in some of the older comments.
Hey i tried to put the stacked graph in to a asp.net application. It works fine. But when i added on click show graph it does not appear on the page.
Any solution for this issue??
Eyed-piece work
i need to have a line graph with a stacked one(combination of both), have any type of this one ?
Ok, now I understand what you need. Unfortunately, it can’t be done with jqBarGraph.
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
How do I get the example to you?
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?
Is there a way to modify your plugin to make the second of two arrays have different colours from the first?
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
@Peter
You have to set values.
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
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);
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!