Databases
StackOverflow2013
Postsdbo
POCharts on rails 3 using highcharts
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCharts on rails 3 using highcharts
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDaniel
    1. USDaniel
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCharts on rails 3 using highcharts
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCharts on rails 3 using highcharts
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. POCharts on rails 3 using highcharts
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat does the generated javascript source look like after that rails code runs?
      singulars
      1. POCharts on rails 3 using highcharts
      1. USNT3RP
    2. CO@NT3RP-I added a "Edit" section with the output
      singulars
      1. POCharts on rails 3 using highcharts
      1. USDaniel
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload