MooTools

How to use

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();

Faq

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.

Screenshots

Discuss

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.