CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3chartshighcharts
qiaqiac
qiaqiac

Reputation: 55

Rails generates chart for .each do |x| using highcharts or any other chart API

I'm using Highcharts JS to display tables of companies ATM.

I'm displaying list of companies in one single page :

<% @companies.each do |company| %>

I tried to render one chart, and put the

<div id="someid" ...> </div>

in side the

.each do |company|

ONLY the first chart is generated, I am assuming that the renderChart() only works once, so if I put <DIV ID="someid" > multiple times, only the first one is working.

how do I solve this problem?

I've found an example to display multiple charts, http://jsfiddle.net/pebch/ but even with the above example, it has to manually do renderChart() three times, and each is with different ID's

How to do this automatically using data from database?

Thanks in advance

EDIT: thanks Jordan!

so now I have

<% @companies.each do |company| %>
  <div id="staffchart-<%= company.permalink %>" ...></div>
<% end %>

and in my Highcharts JS, i have 

<script type="text/javascript">
var charts = new Array;
jQuery.fn.renderChart = function(attr) {
  i = charts.length;
  var chart = charts[i] = new Highcharts.Chart({
    chart: {
      renderTo: $(this).attr('id'),
    },
    series: attr.series,
  });

}
$(document).ready(function(){
        $('#staffchart-microsoft').renderChart({
          series: [{
            type: 'spline',
            name: 'Random data1',
            data: [<% StaffLevel.where(:company_permalink => "microsoft").each do |staff_level| %> 
              [Date.UTC(<%=  staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>],
            <% end %>],
          }],
        });

        $('#staffchart-apple').renderChart({
          series: [{
            type: 'spline',
            name: 'Random data2',
            data: [<% StaffLevel.where(:company_permalink => "apple").each do |staff_level| %> 
              [Date.UTC(<%=  staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>],
            <% end %>],
          }],
        });

        $('#staffchart-twitter').renderChart({
          series: [{
            type: 'spline',
            name: 'Random data3',
            data: [<% StaffLevel.where(:company_permalink => "twitter").each do |staff_level| %> 
              [Date.UTC(<%=  staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>],
            <% end %>],
          }],
        });

so Companies with name twitter/apple/microsoft is displaying correctly now. but thats hard coded in, how to make this section automatically judging by data from database, instead of me coding => "twitter" , and write .renderChart() for many times manually?

Thanks

Upvotes: 3

Views: 1405

Answers (2)

damienbrz
damienbrz

Reputation: 1806

You should do something like that:

$(document).ready(function(){
  <% @companies.each do |company| %>
  $("#staffchart-<%= company.permalink %>").renderChart({
      series: [{
        type: 'spline',
        name: 'Random data1',
        data: [<% StaffLevel.where(:company_permalink => company.permalink).each do |staff_level| %> 
          [Date.UTC(<%=  staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>],
        <% end %>],
      }],
    });
  <% end %>

Upvotes: 1

Jordan Running
Jordan Running

Reputation: 106027

You cannot use the same id for multiple elements in the same document. This is the (X)HTML spec and there's no way around it.

The solution, as you have discovered, is to use a different id for each element (Highcharts doesn't seem to support using a class selector instead of id). This is easy enough to accomplish in Rails. For example:

<% @companies.each do |company| %>
  <div id="container_<%= company.id %>" ...></div>
<% end %>

Upvotes: 4

Related Questions