First, you should declare a new instance of fancyBar, giving it:
var instance = new fancyBars($(container_id),{options}); - container_id: the id of an element that will contain the bar graph. - options: - barsMargin (default: 20), int: margin between bars, defaults to 20 - alphaBar (default: true), boolean: if you want a nice alpha layer covering 50% width of the bar - barClass (default: fancyBar_bar), string: The class you want to apply by default to all the bars
Then, we add some bars, giving:
instance.addBar(value,legend_text,bar_text,{options}); - value, int: a total value for this bar - legend_text, string: unimplemented - bar_text, string: some text to appear at the bottom of the bar - options: - class, string: an specific class for this bar. If not declared will be the previously declared barClass (defaults to fancyBar_bar) - id, string: an specific id for this bar. - barStyle, JSON: an specific style for the given bar, in mootools styles JSON format {'background-color': #FFF, ...} - anim, string: a mootools type of animation to apply to this bar, ex: 'bounce:out', defaults to a 'cubic:in:out'. No animation is declared by 'none'.
At a last step, we call paint()
And at any given time, we can call clear(), to reset the bar graph.
Example:
/* A new fancyBars graph, in #myGraph container, and default class for bars .fancyBar_bar*/ var bars = new fancyBars($('myGraph'),{'barClass':'fancyBar_bar'}); bars.addBar(Math.random()*100+20,'fancy','fun'); /* This bar has a different background and border */ bars.addBar(Math.random()*100+20,'bars','bars',{'barStyle':{'background-color':'#8CBEFF','border-color':'#8CBEFF'}}); bars.addBar(Math.random()*100+20,'are','are'); /* This bar uses another class and a different animation style */ bars.addBar(Math.random()*100+20,'fancy','fun',{'class':'fancyBar_alternate','anim':'bounce:out'}); bars.paint();
Q: There are tons of bar graph plugins around, why should I use this?
A: I don't know, I needed to draw bar graphs for a work, and found the other plugins completely over complicated, this is intended to be a simple plugin
Q: Why don't use canvas?
A: I wrote this like 1 year ago (summer 2009), when canvas wasn't the usual way of doing this.
Q: These bars look too cute, I want something more professional, with more features
A: This class is intended to draw simple and fun bars, refer to the first question.
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus