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+
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,
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.
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
@Erdrick you can send me pull request at github and I’ll be glad to check
k Mike, sent you an e-mail with some samples and updated code. Let me know if you get it or not
Not working with jquery-1.6.1.js , btw., great plugin!
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
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.
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
I constantly spent my half an hour to read this weblog’s articles all the time along with a cup of coffee.
Version 1.1 from April 2011 is compatible with jQuery 1.8+
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.
your bar chart does not work with jquery 1.8 +
your plugin is not working with jquery 1.9
not working with jquery 1.8
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.
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
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?
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?
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 ???
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
Hi,
Good graph but need some settings to fix the Min height of each
bar in multiple bar graph
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,
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,