CSS Graphy
CSS Graphy is a simple-to-use bar-graphing view helper plugin that creates horizontal and vertical graphs only using CSS and markup. Some features:
- Unlimited number of graphs per view
- Auto-scaling with unlimited number range
- Themes support
- All markup is in partials you can tweak
INSTALLATION
To install, issue the following command:
$ ./script/plugin install http://oss.vermonster.com/css_graphy/svn/css_graphy
The CSS and RHTML partial files should be copied to public upon plugin installation. If not, run the available rake task to update (NOTE: rake task pending).
$ rake update_css_graphy
USAGE
Include Style
In your layout template, you should include this call in the <HEAD> section:
<%= graphy_stylesheet %>
If you want to use a different theme (i.e. load different stylesheet):
<%= graphy_stylesheet my_theme %>
Data Format
The data format to graph should be an array of hashes with 'label' and 'value' keys:
[
{ 'label' => 'Bob', 'value' => 10.2 },
{ 'label' => 'Sue', 'value' => 13.6 }
]
I create a method in my model that grabs the data to graph and just pass it through to the view. So in mymodel.rb, I have a method like this. Using the database's AS alias, I set up the correct keys to graph.
def self.data_user_by_time
@data = Entry.connection.select_all('SELECT
users.username AS label,
SUM(entries.minutes) AS value
FROM entries LEFT JOIN users
ON (users.id=entries.user_id)
GROUP BY
users.username')
end
Calling
Now in your views, you can create horizontal and vertical graphs:
<%= vertical_graph(@data_to_graph) %> <%= horizontal_graph(@data_to_graph) %>
There are options you can pass in as well
<%= vertical_graph(@data_to_graph, { :format => '%0.2f' } ) %>
Here are the available options
format : Format of the data in the graph (string)
caption : Caption for the graph (string)
label_title : Title for the label axis (string)
value_title : Title for the value axis (string)
graph_width : Width of graph (default to 300)
graph_height : Height of graph, horz. only (default is 300)
max_value : Override the scaling and use the value passed (number)
accumulate : Scale the graph by adding the values to get the max_value
instead of using the maximum from the passed data set. If
a max value is passed, it trumps this option. (boolean)
Here's a note on the accumulate v not-accumulate. Using the data from the example above:
- vertical_graph(@data_to_graph) - scale would go up to 15
- vertical_graph(@data_to_graph, { :accumulate => true } - scale would be 24
In the above 2 cases, the max value is 5% more then the calculated value, then rounded to be in integer.
- vertical_graph(@data_to_graph, { :max_value => 20 } - scale would be 20
In this case, we don't round, what is passed is used.
CREDITS
Written by Brian Kaney <brian - at - vermonster * com>
