title: Charts on rails 3 using highcharts
body: <p>I am following <a href="http://railscasts.com/episodes?utf8=%E2%9C%93&amp;search=charts" rel="nofollow">chapter 223 (charts) of the railscasts</a>  and was trying to implement the "donut" style for an application using the <a href="http://www.highcharts.com" rel="nofollow">Highcharts library</a>.
  I now know that they're just one "pie" series inside another and each one of them with its own data source.</p>
  
  <p>Although, when trying to adjust the examples to what I wanted I just couldn't get the desired result.I was wondering which is the right way to pass data to the "data" parameter of the chart?.</p>
  
  <p>So I copied from the internet the next code (just for testing):</p>
  
  <pre><code>      series: [       
        {
          type: 'pie',
          name: '2008',
          size: '45%',
          innerSize: '20%',
          data: [
              { name: 'Firefox', y: 45.0, color: '#4572A7' },
              { name: 'IE', y: 26.8, color: '#AA4643' },
              { name: 'Chrome', y: 12.8, color: '#89A54E' },
              { name: 'Safari', y: 8.5, color: '#80699B' },
              { name: 'Opera', y: 6.2, color: '#3D96AE' },
              { name: 'Mozilla', y: 0.2, color: '#DB843D' }      
             ]             
         }
        ]
  </code></pre>
  
  <p>Other way is passing data as:</p>
  
  <pre><code>series: [       
         {
          type: 'pie',
          name: '2008',
          size: '45%',
          innerSize: '20%',
   data: [
          ['IE', 46.6],
          ['Chrome',  3.1], 
          ['Safari',  2.7], 
          ['Opera',  2.3],
          ['Mozilla', 0.4]           
       ]
     }]
  </code></pre>
  
  <p>As you can see, the data I'm using is static.<strong>What if I want to use information from my db?</strong>.
  So,since I have a couple of models:</p>
  
  <pre><code>class Frame &lt; ActiveRecord::Base       class FrString &lt; ActiveRecord::Base
    attr_accessible :name, :total           attr_accessible :frame_id,:name,:total
  
     has_many :fr_strings                   belongs_to :frame
  end                                    end
  </code></pre>
  
  <p>I though creating an array of arrays to eventually use it as datasource for my charts would be a good idea....not so good apparently.</p>
  
  <pre><code>&lt;% _data=[] %&gt;
  &lt;%Frame.all.each do |frame|%&gt;
     &lt;% _data  &lt;&lt; [frame.name,frame.fr_strings.sum(:total)]%&gt;
  &lt;%end%&gt;
  </code></pre>
  
  <p>The pie is no ploting.So I would appreciate any help on this matter</p>
  
  <p><strong>Edit (Javascript output)</strong></p>
  
  <p>When I pass the "data" parameter as:</p>
  
  <pre><code>  data: [                
           &lt;%_data.each do |d|%&gt;
              &lt;%=d%&gt;,
            &lt;%end%&gt;                   
       ]
  </code></pre>
  
  <p>It gives me:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt; 
    &lt;html&gt; 
      &lt;head&gt; 
       &lt;title&gt;Charts&lt;/title&gt; 
        &lt;link href="/stylesheets/application.css?1305016385" media="screen" rel="stylesheet" type="text/css" /&gt; 
       &lt;script src="/javascripts/application.js?1304963001" type="text/javascript"&gt;       &lt;/script&gt; 
    &lt;script src="/javascripts/jquery-1.4.2.min.js?1305020819" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="/javascripts/rails.js?1305020831" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="/javascripts/highcharts.js?1305029094" type="text/javascript"&gt;&lt;/script&gt; 
  
    &lt;meta name="csrf-param" content="authenticity_token"/&gt; 
    &lt;meta name="csrf-token" content="G4k7DrZNfIcJt4Dlbz7JzNViSjQ+OGPUAVY4rW+XAxY="/&gt; 
    &lt;/head&gt; 
  &lt;body&gt; 
         &lt;script type="text/javascript" charset='utf-8'&gt; 
             $(function(){
           new Highcharts.Chart({         
             chart: {
            renderTo: 'frames_chart',
            margin: [50, 0, 0, 0],
            plotBackgroundColor: 'none',
            plotBorderWidth: 0,
            plotShadow: false            
         },
         title: {
            text: 'CHART TITLE'
         },
          subtitle: {
            text: 'Inner circle: 2008, outer circle: 2010'
         },
         tooltip: {
            formatter: function() {
               return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+ 
                  this.point.name +': '+ this.y +' %';
            }
         },
          series: [      
          {
            type: 'pie',
            name: '2008',
            size: '60%',
            innerSize: '10%',
            data: [
                 [&amp;quot;Car&amp;quot;, 93.0]
                 [&amp;quot;House&amp;quot;, 91.0]
            ],
            dataLabels: {
              enabled: false
               }
            },           
          ]
       });
    });
  &lt;/script&gt; 
  
       &lt;div id="frames_chart" style="width:560px; height:300px"&gt;&lt;/div&gt; 
  
   &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>Could that syntaxis <code>"&amp;quot; **** &amp;quot;"</code> be what's messing things up here?.I rechecked the _data array and that's how it's being filled.Maybe the issue concerns to how I'm retrieving data?</p>