mooBarGraph: AJAX graph for MooTools
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 major browsers including IE6.
This is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info boxes, negative values, AJAX data loading…
Features
* You can set label, color, url and tooltip text for every bar
* Bars can be simple or stacked
* Legend can be created automatically
* Data can be loaded with AJAX and can have negative values for simple type
* Compatible with all major browsers including IE
How to use
First you should create element in which you want to create graph. It can be something like:
<div id="myGraph"></div>
After that data array must be created. There are two types available: simple and stacked.
Array for simple type should be like this and everything except value is optional:
new graphData = new Array(
[value1,label1,color1,url1,tooltip1],
[value2,label2,color2,url2,tooltip2],
.....
[valueN,labelN,colorN,urlN,tooltipN]
);
For stacked type also only value is required and everything else is optional. It should look similar to next code:
new graphData = new Array(
[[value11,value12,...,value1M],label1,color1,url1,tooltip1],
[[value21,value22,...,value2M],label2,color2,url2,tooltip2],
.....
[[valueN1,valueN2,...,valueNM],labelN,colorN,urlN,tooltipN]
);
After you create container and data, you have to create mooBarGraph object with prepared arguments.
window.addEvent('domready', function() {
var myGraph = new mooBarGraph({
container: $('myGraph'),
data: graphData
});
})
This will be enough to create bar graph based on your data, but you can pass few additional options. List of options is in next section.
mooBarGraph options
You should always have container and data options:
container // element in which you want mooBarGraph to be created data // array of data for mooBarGraph
Other options are optional (list is shown with default values):
width: 400 // width of graph panel in px height: 300 // height of graph panel in px title: false // graph title. can use html tags barSpace: 10 // space between bars in px color: '#111111' // default color for your bars colors: false // array of colors. it will be used for parts of stacked type or will be repeated for simple type sort: false // 'asc' or 'desc', this can be used only for simple type prefix: '' // string that will be show before bar value postfix: '' // string that will be shown after bar value legend: false // set to true if you want to lefend box be created legendWidth: 100 // width of legend box in px legends: false // array of values for legend showValues: true // for stacked bars type only. false to hide values in sub bars. showValuesColor: '#fff' // color for values in parts for stacked type
AJAX data loading
All you have to do is to call draw() function of your mooBarGraph object and pass url who will return data in JSON format.
myGraph.draw(url);
Example usage:
html
<a href="#" onclick="myGraph.draw('ajaxdata.php')>click here for new data</a>
ajaxdata.php
for($i=0;$i<10;$i++){
$ajaxData[$i][] = rand(-5,5);
}
$ajaxData = json_encode($ajaxData);
echo $ajaxData;
The draw() function also can accept array as argument and create graph dynamically.
myGraph.draw(arrayOfData);
With all of this options you can create really cool presentation of your data as you can see on mooBarGraph demo page. If you can and want to contribute check github.
Comments [ 17 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] mooBarGraph is AJAX graph plugin for MooTools which enables you to easily add simple bar and stacked bar graphs in your web pages. It can make graphs from your JSON data and is compatible with all major browsers including Internet Explorer 6. [...]
-
[...] mooBarGraph (за MooTools) [...]
-
[...] Source: http://workshop.rs/2010/02/moobargraph-ajax-graph-for-mootools/ [...]
-
[...] mooBarGraph项目主页 | mooBarGraph项目下载 | mooBarGraph中文支持 [...]
-
[...] Documentation [...]
-
[...] tried both mooBarGraph and JqBarGraph and with both, I had the issue of stuff appearing that I didn’t need or want [...]
Leave a Reply
More Articles
-
News Ticker in 4 lines of jQuery
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 od jQuery code ?
Idea is pretty simple, take first element from list, apply some disappearing effect on it and on [...]
-
jqIsoText: jQuery Text Effect Plugin
Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that. One of them is jqIsoText.
With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On [...]
-
Image gallery with fancy transitions effects
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 effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plugin for jQuery. [...]
-
JUST – JavaScript Useful Stuff
I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to [...]
April 24, 2010
Can you please help me? When I use this like so:
graphdata = new Array(
[232,'1',,,'Month 1'],
[340,'2',,,'Month 2'],
[497,'3',,,'Month 3'],
[728,'4',,,'Month 4'],
[1066,'5',,,'Month 5'],
[1561,'6',,,'Month 6'],
[2286,'7',,,'Month 7'],
[3346,'8',,,'Month 8'],
[4899,'9',,,'Month 9'],
[7173,'10',,,'Month 10']
);
window.addEvent(’domready’, function() {
var myGraph = new mooBarGraph({
container: $(’graph’),
width: 1000,
height: 1000,
data: graphdata,
colors: ['#5757FF','#5757FF','#5757FF'],
color: ‘#1A2944′,
legend: false,
prefix: ‘$’,
legendWidth: 150,
title: ‘Escape scenario chart’
});
})
I’m getting a wonderful graph, but the FIRST bar is about 20 pixels below, such as if it’s a negative value (but it’s not.) Why is this??
Thanks!
April 26, 2010
Brennan, I know for that issue. It appears when difference between lowest and highest value is big.
May 18, 2010
Hi, i’m mootools dev, my project – “SegmentBox” tablegrid.
Some demos: (25-30 % from full functional)
- segmentbox.com/demo/more/admin.html
- segmentbox.com/demo/sklif/admin.html
I want to make “SegmentBox” work together with MOOBARGRAPH.
To build GRAPH from data of segmentbox tablegrid
So segmentbox tablegrid use csv structure…
“3|true|name|2,1,3|1000|2000|2010-11-21″
If you have free time, mail me…
June 1, 2010
Any luck with that first bar difference issue?
June 1, 2010
It’s not a matter of luck, it’s just a matter of free time : )
June 9, 2010
Hi, thanks for the great work, unfortunately I’m having the same “negative” value effect on most of my graphs which for me makes the plugin useless (for now). Hope you can have the time to look at this considering how far you’ve gone already!.
Cheers!
June 16, 2010
Thanks for this great plugin!
Much easier than most graphing scripts/plugins. The json ajax loading is great!!!
Hats Off!
June 19, 2010
This is an awesome script Lazarevic, and I’m pretty sure that if you use a little time to fix the “negative” bug, you’ll get the status of hero in some circles – yes it’s probably gonna be in the nerdy circles, but a hero you’ll be
Thank you for your work, now I’ll have to attend other things within my reach. I’ll be checking this page out in the future for updates.
Greetings from Denmark.
July 9, 2010
I made a quick fix for the bar difference issue. This only seems to work if all of your values are positive.
Add this code to line 241 in the uncompressed file:
var barBodyHolderHeight = parseInt(barBodyHolder.getStyle(’height’));
if(isNaN(barBodyHolderHeight)) barBodyHolderHeight = 0;
barHolder.setStyles({
height: lblvalHeight + barBodyHolderHeight,
display: ‘block’
});
July 17, 2010
Really cool script – the best I could find for mootools.
Thank you & Justin for the fix!
Keep it up
Cheers
April 9, 2011
I think the bug of “negative” when difference between lowest and highest value is big
can be solved by this way:
now, the barHeight is:
barHeight = (barValue == 0) ? ‘0′ : (this.options.height*Math.abs(barValue))/barMax;
but, barValueHolder may use 18px, and barLabelHolder too.
so I add:
if (barHeight < valAndLabelHeight){
barHeight = valAndLabelHeight + 1; // just 1px
}