Html5jpGraphs¶ ↑

Html5jpGraphs is a Rails Plugin for HTML5.jp Graph Libraries.

HTML5.jp Graph Libraries are written by futomi, released under Apache License, Version 2.0. www.html5.jp/library/index.html

There are 4 kinds of graphs in HTML5.jp.

• vertical bar chart

• radar chart

• line chart

• pie chart

With this plugin, you can easily draw graphs using helper methods. Helper methods accepts both simple array data and your original complex model objects.

Install¶ ↑

> git clone git://github.com/nay/html5jp_graphs.git vendor/plugins/html5jp_graphs

If you use Rails 2.1 or later, you can install with this command.

> ruby script/plugin install git://github.com/nay/html5jp_graphs.git

Setup¶ ↑

First of all, you need to include javascripts. You can include these files by using :all option.

<%= javascript_include_tag :all %>

Also you can include required files separately.

• required for all graphs … excanvas.js, excanvas-compressed.js

• vertical bar chart … vbar.js

• radar chart … radar.js

• pie chart … circle.js

• line chart … line.js

Then, add :htmltjp_graphs as a helper in your controllers.

class GraphsController < ApplicationController
  helper :html5jp_graphs
end

Example¶ ↑

Draw a Vertical Bar Chart¶ ↑

<%= vertical_bar_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>

 or you can use your own model obejct (with some methods. Please see RDoc for the requirements).

<%= vertical_bar_chart access_click_summaries %>

Draw a Radar Chart¶ ↑

<%= radar_chart [['review1', 5, 4, 3], ['review2', 3, 5, 2]], :aCap => ['price', 'style', 'sound'] %>

<%= radar_chart reviews %>

Draw a Line Chart¶ ↑

<%= line_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>

<%= line_chart access_click_summaries %>

Draw a Pie Chart¶ ↑

<%= pie_chart([["very good", 400], ["good", 300], ["bad", 100], ["very bad", 300]]) %>

<%= pie_chart opinions %>

Options¶ ↑

You can use all options in HTML5.jp. Note that string options should be wrapped in ‘ ’, or it would be used as a script code.

For example, to specify the backgroundColor option to a radar chart, write like this.

<%= radar_chart reviews, :backgroundColor => "'red'" %>

Copyright © 2008 Yasuko Ohba (y.ohba@everyleaf.com), released under the apache license