nay-html5jp_graphs 0.1

data/init.rb

@@ -0,0 +1 @@
+require File.join(RAILS_ROOT, 'vendor', 'plugins', 'html5jp_graphs', 'install.rb')

data/install.rb

@@ -0,0 +1,10 @@
+# Copy html5jp JavaScript codes to public/javascripts.
+
+Dir.chdir(File.join(RAILS_ROOT, 'vendor', 'plugins', 'html5jp_graphs')) do
+  dest_dir = File.join(RAILS_ROOT, 'public', 'javascripts')
+  FileUtils.mkdirs(dest_dir) unless File.exist?(dest_dir)
+
+  Dir.glob("html5jp/html5jp/**/*.js").each do |path|
+    FileUtils.cp(path, dest_dir) unless File.exist?(File.join(dest_dir, File.basename(path)))
+  end
+end

data/lib/html5jp_graphs_helper.rb

@@ -0,0 +1,255 @@
+# Html5jpGraphsHelper
+module Html5jpGraphsHelper
+
+  # Draw a vertical bar chart using Html5jp vertical bar chart (http://www.html5.jp/library/graph_vbar.html).
+  #
+  # ex.
+  #   <%= vertical_bar_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>
+  # 
+  # The first argument 'resource' can be one of the following forms.
+  # * ['accesses', 520, 340, 804, 602]
+  # * [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]]
+   # * Any other object which has required methods as follows;
+  #   * each - to supply record objects.
+  #   * items - If :x option does not exist and your resource object has items method, it is called to get :x. You can change the method name by :items_method option.
+  #   * scales - If :y option does not exist and your resource object has scales method, it is called to get :y. You can change the method name by :scales_method option
+  #   * max_scale - Would be used as :yMax option if it exists.
+  #   * The record object shoud have methods as follows.
+  #     * label - Like 'accesses' in the example. You can use other method if you specify :label_method option.
+  #     * values - Like [520, 340, 804, 602] in the example. You can use other method if you specify :values_method option.
+  #     * color - If :barColors option does not exist and your record object has color method, it is used for :barColors. You can change the method name by :color_method option.
+  # Additionaly, the following options are available.
+  # * :canvas_id - element id of the canvas. Default is 'line_chart'. Note that all rader charts in one page sould have unique canvas_ids.
+  # * :width - The width of the canvas. Default is 400.
+  # * :height - The height of the canvas. Default is 300.
+  # * All options in http://www.html5.jp/library/graph_vbar.html. ex. 'backgroundColor' or :backgroundColor.
+  # And you can use html_options for the top level div.
+ def vertical_bar_chart(resource, options = {}, html_options = {})
+    options = {:width => 400, :height => 300, :canvas_id => 'vertical_bar_chart'}.merge(options.symbolize_keys)
+    output = canvas(options, html_options)
+    output << "\n"
+    output << vertical_bar_chart_js(resource, options)
+  end
+
+
+  # Draw a radar chart using Html5jp radar chart (http://www.html5.jp/library/graph_radar.html).
+  #
+  # ex.
+  #   <%= radar_chart [['review1', 5, 4, 3], ['review2', 3, 5, 2]], :aCap => ['price', 'style', 'sound'] %>
+  # 
+  # The first argument 'resource' can be one of the following forms.
+  # * ['my review', 1, 2, 3, 4]
+  # * [['my review', 1, 2, 3, 4], ['all reviews', 2, 3, 4, 3]]
+  # * Any other object which has required methods as follows;
+  #   * each - to supply record objects.
+  #   * items - If :aCap option does not exist and your resource object has items method, it is called to get :aCap. You can change the method name by :items_method option.
+  #   * The record object shoud have methods as follows.
+  #     * label - Like 'my review' in the example. You can use other method if you specify :label_method option.
+  #     * values - Like [1, 2, 3, 4] in the example. You can use other method if you specify :values_method option.
+  #     * color - If :faceColors option does not exist and your record object has color method, it is used for :faceColors. You can change the method name by :color_method option.
+  # Additionaly, the following options are available.
+  # * :canvas_id - element id of the canvas. Default is 'rader_chart'. Note that all rader charts in one page sould have unique canvas_ids.
+  # * :width - The width of the canvas. Default is 400.
+  # * :height - The height of the canvas. Default is 300.
+  # * All options in http://www.html5.jp/library/graph_radar.html. ex. 'aMax' or :aMax.
+  # And you can use html_options for the top level div.
+  def radar_chart(resource, options = {}, html_options = {})
+    options = {:width => 400, :height => 300, :canvas_id => 'reader_chart'}.merge(options.symbolize_keys)
+    output = canvas(options, html_options)
+    output << "\n"
+    output << rader_chart_js(resource, options)
+  end
+  
+  # Draw a line chart using Html5jp radar chart (http://www.html5.jp/library/graph_line.html).
+  #
+  # ex.
+  #   <%= line_chart [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]] %>
+  # 
+  # The first argument 'resource' can be one of the following forms.
+  # * ['accesses', 520, 340, 804, 602]
+  # * [['accesses', 520, 340, 804, 602], ['clicks', 101, 76, 239, 321]]
+  # * Any other object which has required methods as follows;
+  #   * each - to supply record objects.
+  #   * items - If :x option does not exist and your resource object has items method, it is called to get :x. You can change the method name by :items_method option.
+  #   * scales - If :y option does not exist and your resource object has scales method, it is called to get :y. You can change the method name by :scales_method option
+  #   * max_scale - Would be used as :yMax option if it exists.
+  #   * min_scale - Would be used as :yMin option if it exists.
+  #   * The record object shoud have methods as follows.
+  #     * label - Like 'accesses' in the example. You can use other method if you specify :label_method option.
+  #     * values - Like [520, 340, 804, 602] in the example. You can use other method if you specify :values_method option.
+  # Additionaly, the following options are available.
+  # * :canvas_id - element id of the canvas. Default is 'line_chart'. Note that all rader charts in one page sould have unique canvas_ids.
+  # * :width - The width of the canvas. Default is 400.
+  # * :height - The height of the canvas. Default is 300.
+  # * All options in http://www.html5.jp/library/graph_line.html. ex. 'yMax' or :yMax.
+  # And you can use html_options for the top level div.
+  def line_chart(resource, options = {}, html_options = {})
+    options = {:width => 400, :height => 300, :canvas_id => 'line_chart'}.merge(options.symbolize_keys)
+    output = canvas(options, html_options)
+    output << "\n"
+    output << line_chart_js(resource, options)
+  end
+
+  # Draw a pie chart using HTML5jp pie chart (http://www.html5.jp/library/graph_circle.html).
+  #
+  # ex.
+  #   <%= pie_chart([["very good", 400], ["good", 300], ["bad", 100], ["very bad", 300]]) %>
+  #
+  # The first argument 'resource' can be one of the following forms.
+  # * [["very good", 400], ["good", 300], ["bad", 100], ["very bad", 300, "red"]]
+  # * Any other object which has required methods as follows;
+  #   * each - to supply record objects.
+  #   * The record object shoud have methods as follows.
+  #     * label - Like 'very good' in the example. You can use other method if you specify :label_method option.
+  #     * value - Like 400 in the example. You can use other method if you specify :value_method option.
+  #     * color - Like "red" in the example. You can use other method if you specify :color_method option. This is optional.
+  # Additionaly, the following options are available.
+  # * :canvas_id - element id of the canvas. Default is 'pie_chart'. Note that all rader charts in one page sould have unique canvas_ids.
+  # * :width - The width of the canvas. Default is 400.
+  # * :height - The height of the canvas. Default is 300.
+  # * :sort - If true, sort the records in descending order. Default is false.
+  # * All options in http://www.html5.jp/library/graph_circle.html. ex. 'startAngle' or :startAngle.
+  # And you can use html_options for the top level div.
+  def pie_chart(resource, options = {}, html_options = {})
+    options = {:width => 400, :height => 300, :canvas_id => 'pie_chart', :sort => false}.merge(options.symbolize_keys)
+    output = canvas(options, html_options)
+    output << "\n"
+    output << pie_chart_js(resource, options)
+  end
+  
+  private
+  
+  def canvas(options, html_options)
+    content_tag(:div, content_tag(:canvas, '', :width => options[:width], :height => options[:height], :id => options[:canvas_id]), html_options)
+  end
+  
+  def vertical_bar_chart_js(resource, options)
+    graph_options = options.dup.delete_if{|key, value| [:canvas_id, :width, :height, :items_method, :scales_method, :max_scale_method, :label_method, :values_method, :color_method].include?(key) || value.blank?}
+    options = {:items_method => :items, :scales_method => :scales, :max_scale_method => :max_scale, :label_method => :label, :values_method => :values, :color_method => :color}.merge(options)
+    
+    if resource.kind_of?(Array) && resource.first.kind_of?(Array)
+      records = resource
+    elsif resource.kind_of?(Array) && resource.first.kind_of?(String)
+      records = [resource]
+    else
+      records = []
+      record_colors = []
+      for record in resource
+        records << [record.send(options[:label_method])].concat(record.send(options[:values_method]))
+        record_colors << record.send(options[:color_method]) if !graph_options[:barColors] && record.respond_to?(options[:color_method])
+      end
+      graph_options[:x] ||= resource.send(options[:items_method]) if resource.respond_to?(options[:items_method])
+      graph_options[:y] ||= resource.send(options[:scales_method]) if resource.respond_to?(options[:scales_method])
+      graph_options[:yMax] ||= resource.send(options[:max_scale_method]) if resource.respond_to?(options[:max_scale_method])
+      graph_options[:barColors] ||= record_colors unless record_colors.find{|c| c}.blank?
+    end
+    
+    draw("vbar", options[:canvas_id], records, graph_options)
+  end
+  
+  def rader_chart_js(resource, options)
+    graph_options = options.dup.delete_if{|key, value| [:canvas_id, :width, :height, :label_method, :values_method, :items_method, :color_method].include?(key) || value.blank?}
+    options = {:label_method => :label, :values_method => :values, :items_method => :items, :color_method => :color}.merge(options)
+
+    if resource.kind_of?(Array) && resource.first.kind_of?(Array)
+      records = resource
+    elsif resource.kind_of?(Array) && resource.first.kind_of?(String)
+      records = [resource]
+    else
+      records = []
+      record_colors = []
+      for record in resource
+        records << [record.send(options[:label_method])].concat(record.send(options[:values_method]))
+        record_colors << record.send(options[:color_method]) if !graph_options[:faceColors] && record.respond_to?(options[:color_method])
+      end
+      graph_options[:aCap] ||= resource.send(options[:items_method]) if resource.respond_to?(options[:items_method])
+      graph_options[:faceColors] ||= record_colors unless record_colors.find{|c| c}.blank?
+    end
+
+    draw("radar", options[:canvas_id], records, graph_options)
+  end
+
+  def line_chart_js(resource, options)
+    graph_options = options.dup.delete_if{|key, value| [:canvas_id, :width, :height, :items_method, :scales_method, :max_scale_method, :min_scale_method, :label_method, :values_method].include?(key) || value.blank?}
+    options = {:items_method => :items, :scales_method => :scales, :max_scale_method => :max_scale, :min_scale_method => :min_scale, :label_method => :label, :values_method => :values}.merge(options)
+
+    if resource.kind_of?(Array) && resource.first.kind_of?(Array)
+      records = resource
+    elsif resource.kind_of?(Array) && resource.first.kind_of?(String)
+      records = [resource]
+    else
+      records = []
+      for record in resource
+        records << [record.send(options[:label_method])].concat(record.send(options[:values_method]))
+      end
+      graph_options[:x] ||= resource.send(options[:items_method]) if resource.respond_to?(options[:items_method])
+      graph_options[:y] ||= resource.send(options[:scales_method]) if resource.respond_to?(options[:scales_method])
+      graph_options[:yMax] ||= resource.send(options[:max_scale_method]) if resource.respond_to?(options[:max_scale_method])
+      graph_options[:yMin] ||= resource.send(options[:min_scale_method]) if resource.respond_to?(options[:min_scale_method])
+    end
+    
+    draw("line", options[:canvas_id], records, graph_options)
+  end
+
+  def pie_chart_js(resource, options)
+    graph_options = options.dup.delete_if{|key, value| [:canvas_id, :items, :width, :height, :label_method, :value_method, :color_method, :sort].include?(key) || value.blank?}
+    options = {:label_method => :label, :value_method => :value, :color_method => :color}.merge(options)
+  
+    if resource.kind_of?(Array) && resource.first.kind_of?(Array)
+      records = resource
+    else
+      records = []
+      for record in resource
+        record_array = [record.send(options[:label_method]), record.send(options[:value_method])]
+        record_array << record.send(options[:color_method]) if record.respond_to?(options[:color_method])
+        records << record_array
+      end
+    end
+    
+    records = records.sort {|r1, r2| r2[1] <=> r1[1]} if options[:sort]
+  
+    draw("circle", options[:canvas_id], records, graph_options)
+  end
+
+  
+  def draw(class_name, canvas_id, records, graph_options)
+    javascript_tag <<-EOS
+Event.observe(window, 'load', function() {
+  var rc = new html5jp.graph.#{class_name}("#{canvas_id}");
+  if( ! rc ) { return; }
+  var records = #{to_js_value(records)};
+  var options = #{options_to_json(graph_options)};
+  rc.draw(records, options);
+});
+    EOS
+  end
+  
+  # Don't use to_json avoiding url encoding of local characters.
+  def options_to_json(options)
+    content = options.map{|key, value| "#{key}: #{to_js_value(value)}"}.join(",\n")
+    "{#{content}}"
+  end
+
+  def to_js_value(value)
+    if value.nil?
+      'null'
+    elsif value.kind_of?(Array)
+      "[#{value.map{|v| array_element_to_js_value(v)}.join(', ')}]"
+    else
+      value.to_s
+    end
+  end
+  
+  def array_element_to_js_value(value)
+    if value.nil?
+      'null'
+    elsif value.kind_of?(Numeric) || value.to_s =~ /^-?[0-9][0-9]*[\.]?[0-9]*$/
+      value
+    elsif value.kind_of?(Array)
+      "[#{value.map{|v| array_element_to_js_value(v)}.join(', ')}]"
+    else
+      "\"#{value}\""
+    end
+  end
+
+end

data/rdoc/classes/Html5jpGraphsHelper.html

@@ -0,0 +1,326 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE html 
+     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>Module: Html5jpGraphsHelper</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+  <meta http-equiv="Content-Script-Type" content="text/javascript" />
+  <link rel="stylesheet" href=".././rdoc-style.css" type="text/css" media="screen" />
+  <script type="text/javascript">
+  // <![CDATA[
+
+  function popupCode( url ) {
+    window.open(url, "Code", "resizable=yes,scrollbars=yes,toolbar=no,status=no,height=150,width=400")
+  }
+
+  function toggleCode( id ) {
+    if ( document.getElementById )
+      elem = document.getElementById( id );
+    else if ( document.all )
+      elem = eval( "document.all." + id );
+    else
+      return false;
+
+    elemStyle = elem.style;
+    
+    if ( elemStyle.display != "block" ) {
+      elemStyle.display = "block"
+    } else {
+      elemStyle.display = "none"
+    }
+
+    return true;
+  }
+  
+  // Make codeblocks hidden by default
+  document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
+  
+  // ]]>
+  </script>
+
+</head>
+<body>
+
+
+
+    <div id="classHeader">
+        <table class="header-table">
+        <tr class="top-aligned-row">
+          <td><strong>Module</strong></td>
+          <td class="class-name-in-header">Html5jpGraphsHelper</td>
+        </tr>
+        <tr class="top-aligned-row">
+            <td><strong>In:</strong></td>
+            <td>
+                <a href="../files/lib/html5jp_graphs_helper_rb.html">
+                lib/html5jp_graphs_helper.rb
+                </a>
+        <br />
+            </td>
+        </tr>
+
+        </table>
+    </div>
+  <!-- banner header -->
+
+  <div id="bodyContent">
+
+
+
+  <div id="contextContent">
+
+    <div id="description">
+      <p>
+<a href="Html5jpGraphsHelper.html">Html5jpGraphsHelper</a>
+</p>
+
+    </div>
+
+
+   </div>
+
+    <div id="method-list">
+      <h3 class="section-bar">Methods</h3>
+
+      <div class="name-list">
+      <a href="#M000001">pie_chart</a>&nbsp;&nbsp;
+      <a href="#M000002">radar_chart</a>&nbsp;&nbsp;
+      </div>
+    </div>
+
+  </div>
+
+
+    <!-- if includes -->
+
+    <div id="section">
+
+
+
+
+
+      
+
+
+    <!-- if method_list -->
+    <div id="methods">
+      <h3 class="section-bar">Public Instance methods</h3>
+
+      <div id="method-M000001" class="method-detail">
+        <a name="M000001"></a>
+
+        <div class="method-heading">
+          <a href="#M000001" class="method-signature">
+          <span class="method-name">pie_chart</span><span class="method-args">(resource, options = {}, html_options = {})</span>
+          </a>
+        </div>
+      
+        <div class="method-description">
+          <p>
+Draw a pie chart using HTML5jp pie chart (<a
+href="http://www.html5.jp/library/graph_circle.html">www.html5.jp/library/graph_circle.html</a>).
+</p>
+<p>
+ex.
+</p>
+<pre>
+  &lt;%= pie_chart([[&quot;very good&quot;, 400], [&quot;good&quot;, 300], [&quot;bad&quot;, 100], [&quot;very bad&quot;, 300]]) %&gt;
+</pre>
+<p>
+The first argument &#8216;resource&#8217; can be one of the following
+forms.
+</p>
+<ul>
+<li>[[&quot;very good&quot;, 400], [&quot;good&quot;, 300], [&quot;bad&quot;,
+100], [&quot;very bad&quot;, 300, &quot;red&quot;]]
+
+</li>
+<li>Any other object which has required methods as follows;
+
+<ul>
+<li>each - to supply record objects.
+
+</li>
+<li>The record object shoud have methods as follows.
+
+<ul>
+<li>label - Like &#8216;very good&#8217; in the example. You can use other
+method if you specify :label_method option.
+
+</li>
+<li>value - Like 400 in the example. You can use other method if you specify
+:value_method option.
+
+</li>
+<li>color - Like &quot;red&quot; in the example. You can use other method if
+you specify :color_method option. This is optional.
+
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<p>
+Additionaly, the following options are available.
+</p>
+<ul>
+<li>:canvas_id - element id of the canvas. Default is
+&#8216;rader_chart&#8217;. Note that all rader charts in one page sould
+have unique canvas_ids.
+
+</li>
+<li>:width - The width of the canvas. Default is 400.
+
+</li>
+<li>:height - The height of the canvas. Default is 300.
+
+</li>
+<li>:sort - If true, sort the records in descending order. Default is false.
+
+</li>
+<li>All options in <a
+href="http://www.html5.jp/library/graph_circle.html">www.html5.jp/library/graph_circle.html</a>.
+ex. &#8216;startAngle&#8217; or :startAngle.
+
+</li>
+</ul>
+<p>
+And you can use html_options for the top level div.
+</p>
+          <p><a class="source-toggle" href="#"
+            onclick="toggleCode('M000001-source');return false;">[Source]</a></p>
+          <div class="method-source-code" id="M000001-source">
+<pre>
+    <span class="ruby-comment cmt"># File lib/html5jp_graphs_helper.rb, line 25</span>
+25:   <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">pie_chart</span>(<span class="ruby-identifier">resource</span>, <span class="ruby-identifier">options</span> = {}, <span class="ruby-identifier">html_options</span> = {})
+26:     <span class="ruby-identifier">options</span> = {<span class="ruby-identifier">:width</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value">400</span>, <span class="ruby-identifier">:height</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value">300</span>, <span class="ruby-identifier">:canvas_id</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">'pie_chart'</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">options</span>.<span class="ruby-identifier">symbolize_keys</span>)
+27:     <span class="ruby-identifier">output</span> = <span class="ruby-identifier">canvas</span>(<span class="ruby-identifier">options</span>, <span class="ruby-identifier">html_options</span>)
+28:     <span class="ruby-identifier">output</span> <span class="ruby-operator">&lt;&lt;</span> <span class="ruby-value str">&quot;\n&quot;</span>
+29:     <span class="ruby-identifier">output</span> <span class="ruby-operator">&lt;&lt;</span> <span class="ruby-identifier">pie_chart_js</span>(<span class="ruby-identifier">resource</span>, <span class="ruby-identifier">options</span>)
+30:   <span class="ruby-keyword kw">end</span>
+</pre>
+          </div>
+        </div>
+      </div>
+
+      <div id="method-M000002" class="method-detail">
+        <a name="M000002"></a>
+
+        <div class="method-heading">
+          <a href="#M000002" class="method-signature">
+          <span class="method-name">radar_chart</span><span class="method-args">(resource, options = {}, html_options = {})</span>
+          </a>
+        </div>
+      
+        <div class="method-description">
+          <p>
+Draw a radar chart using Html5jp radar chart (<a
+href="http://www.html5.jp/library/graph_radar.html">www.html5.jp/library/graph_radar.html</a>).
+</p>
+<p>
+ex.
+</p>
+<pre>
+  &lt;%= radar_chart [['review1', 5, 4, 3], ['review2', 3, 5, 2]], :aCap =&gt; ['price', 'style', 'sound'] %&gt;
+</pre>
+<p>
+The first argument &#8216;resource&#8217; can be one of the following
+forms.
+</p>
+<ul>
+<li>[&#8216;my review&#8217;, 1, 2, 3, 4]
+
+</li>
+<li>[[&#8216;my review&#8217;, 1, 2, 3, 4], [&#8216;all reviews&#8217;, 2, 3,
+4, 3]]
+
+</li>
+<li>Any other object which has required methods as follows;
+
+<ul>
+<li>each - to supply record objects.
+
+</li>
+<li>items - If :aCap option does not exist and your resource object has items
+method, it is called to get :aCap. You can change the method name by
+:items_method option.
+
+</li>
+<li>The record object shoud have methods as follows.
+
+<ul>
+<li>label - Like &#8216;my review&#8217; in the example. You can use other
+method if you specify :label_method option.
+
+</li>
+<li>values - Like [1, 2, 3, 4] in the example. You can use other method if you
+specify :values_method option.
+
+</li>
+<li>color - If :faceColors option does not exist and your record object has
+color method, it is used for :faceColors. You can change the method name by
+:colors_method option.
+
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<p>
+Additionaly, the following options are available.
+</p>
+<ul>
+<li>:canvas_id - element id of the canvas. Default is
+&#8216;rader_chart&#8217;. Note that all rader charts in one page sould
+have unique canvas_ids.
+
+</li>
+<li>:width - The width of the canvas. Default is 400.
+
+</li>
+<li>:height - The height of the canvas. Default is 300.
+
+</li>
+<li>All options in <a
+href="http://www.html5.jp/library/graph_radar.html">www.html5.jp/library/graph_radar.html</a>.
+ex. &#8216;aMax&#8217; or :aMax.
+
+</li>
+</ul>
+<p>
+And you can use html_options for the top level div.
+</p>
+          <p><a class="source-toggle" href="#"
+            onclick="toggleCode('M000002-source');return false;">[Source]</a></p>
+          <div class="method-source-code" id="M000002-source">
+<pre>
+    <span class="ruby-comment cmt"># File lib/html5jp_graphs_helper.rb, line 53</span>
+53:   <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">radar_chart</span>(<span class="ruby-identifier">resource</span>, <span class="ruby-identifier">options</span> = {}, <span class="ruby-identifier">html_options</span> = {})
+54:     <span class="ruby-identifier">options</span> = {<span class="ruby-identifier">:width</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value">400</span>, <span class="ruby-identifier">:height</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value">300</span>, <span class="ruby-identifier">:canvas_id</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-value str">'reader_chart'</span>}.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">options</span>.<span class="ruby-identifier">symbolize_keys</span>)
+55:     <span class="ruby-identifier">output</span> = <span class="ruby-identifier">canvas</span>(<span class="ruby-identifier">options</span>, <span class="ruby-identifier">html_options</span>)
+56:     <span class="ruby-identifier">output</span> <span class="ruby-operator">&lt;&lt;</span> <span class="ruby-value str">&quot;\n&quot;</span>
+57:     <span class="ruby-identifier">output</span> <span class="ruby-operator">&lt;&lt;</span> <span class="ruby-identifier">rader_chart_js</span>(<span class="ruby-identifier">resource</span>, <span class="ruby-identifier">options</span>)
+58:   <span class="ruby-keyword kw">end</span>
+</pre>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+
+
+  </div>
+
+
+<div id="validator-badges">
+  <p><small><a href="http://validator.w3.org/check/referer">[Validate]</a></small></p>
+</div>
+
+</body>
+</html>