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.

Usage

JavaScript

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

JSON

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" } ] }

CSS

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.

.graph{
	/* This contains everything in a particular object. The name, and the bar.*/
}

.graph_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. */
}

.label{
        /* This is just the place the name is inserted. */
}

Demo and Download

Please wait at least 5 seconds to see the graph refresh and animate. These numbers are being dynamically created via PHP into a JSON file.

You can see it in action here.
Download a zip here.

Credits

Big thanks to these guys:

Popular Posts

Help The Javascript Blog

If you would like to write for The Javascript Blog or submit a plugin or class please feel free to contact us.


Leave Your Response

* Name, Email, Comment are Required