MooTools Grapher Class

Let it be known. This class doesn’t have a lot of options but it is fairly dynamic. If people actually use this class I will make it more customizable to the options and not just the class itself.

While this is nothing special and there are plenty of great MooTools graphing systems out there I wanted to build one that animated up and down as well as side to side. I’m sure there are others that do this but I was curious to learn how and dove in. Any advice, tips, improvements, or feedback is greatly appreciated.



var myGraph = new Grapher('element_id',{
json : 'json.php',
total : '100'


The JSON productivity number in this case is based on 100 but this class will support any value. When you initiate your graph you set the total option to calculate the percentage. If you are just comparing to other employees you would take the top sells man and calculate the percentage on a bell curve.

{"graph": [ { "name" : "insert name", "key" : "1", "productivity" : "92" } ] }


The element container that you pass into the initiating function of this graph will be the total set width for the bars at 100%. Make sure you keep that in mind.
/* This contains everything in a particular object. The name, and the bar.*/

/* This is the actual bar the width changes based on the JSON calculated percentage. You need a background image or color to show the bar as well as a height. */

/* This is just the place the name is inserted. */

Posts Tagged with…

Write a Comment

Your email address will not be published. Required fields are marked *