CSS Graphy plugin

Plugin details

CSS Graphy is a simple-to-use bar-graphing view helper plugin that creates horizontal and vertical graphs only using CSS and markup.

Websitehttp://oss.vermonster.com/css_graphy Repositoryhttp://oss.vermonster.com/css_graphy/svn/css_graphy/ Author Brian Kaney Tags CSS LicenseUnknown

Documentation

Install the plugin:
ruby script/plugin install http://oss.vermonster.com/css_graphy/svn/css_graphy/

Include Style
==============
In your layout template, you should include this call in the 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.

Further Documentation

There is currently no advanced documentation for this plugin.

New documentation

Edit plugin | (0 older versions) | Last edited by: hardway, 13 days ago