Gruff Graph Customisation

I've just managed to get my graph customisation up and running. You can now graph three different types of graph: pie, stackedbar and sidestackedbar.



The variables that you can customise are the width of the image in pixels, (automatically sets it to 4:3 ratio), graphing by project or job, data breakdown and specified flow.



Not all of these customisations are available to all graphs but the javascript control handles what the user can select. Different graphs work differently.

The way a pie graph handles data is by accepting a number, attached with the data identifier.

# Example of adding data to a pie graph.
g.data("Data Identifier", 50)

The way a sidestackedbar/stackedbar graph handles data is by accepting an array of values, attached with the data identifier.

# Example of adding data to a sidestackedbar/stackedbar graph.
g.data("Data Identifier", [1, 2, 5])

Of course there are so many other customisations that can be implemented but I don't think I have time to implement them. This will do for now.

For Gruff API reference, click here. Gruff samples can also be seen here.

Progress Update

Have been working on budgeting functionalities this past couple of weeks. Seems like I've managed to get these things working though it may require further testing.

1. Transactions - Add/Edit/Delete (admin, member, guest)
2. Jobs - Add/Edit/Delete (admin) [job description might still need some work]
3. Projects - Add (all) [need to do edit and delete]
4. Members - Add/Delete (admin) [need to do permission editing]

All this is done using javascript and ajax. A lot of fiddling around but its getting there.

Thesis Update!

It's been a busy past few weeks, getting familiar with the prototype and scriptaculous javascript framework but it has paid off. Been looking into user interface design where there can be more interaction with the user.

What I've been trying to do is to try and simulate a 'desk' environment, where you would normally use your hands to move things around depending on what you want to do. What that means is to make things draggable, collapsible, expandable etc.

As you can see below, I've added drop down menus for menu selection. I've also made the right hand navigation bar draggable, as well as the main content in the middle. Can't really see it from a picture I guess. The main content and navigation bars are also expandable and collapsible.
I've also rethought the design of performing actions that does not require a lot of data loading. In other words, utilizing AJAX to perform actions without really leaving the page which means no refresh.

Created a hovering div that disables the content below, and displays the content above it depending on what type of action it is. I used scriptaculous' effects (Fade and Switchoff) to display and close the hover div.

I've only tested this on a Firefox environment as the browser has great plugin tools (Firebug) which makes debugging JavaScript, HTML and CSS a walk in the park.





Over the next couple of weeks I plan to add drag & drop features which will allow more user interaction by using the mouse which in return, simulates using a hand to do stuff. Hopefully there will be minimal user input where it isn't necessary.

Hopefully I'll have the chance to post up how I did all these things soon.