ChartKick Charts constantly loading and mixing up with other graphs on page Rails

Question

Ok, this sound strange, but it is actually happening in a App that I´m building.

I´m totally blank about why this is happening and below is a description of the problem and samples of my code.

On my users/show.html.erb I have few graphs that are rendered in nav-tabs on the show.html.erb through partials. That is working fine and the charts are rendering in each tab as they should do. But then there is this row of charts that is also rendered from a partial called _dashboard_part.html.erb. If I comment the dashboard partial out all the other graphs are working fine, but if I uncomment the dashboard_part partial the previously mentioned graphs are taking extreme time to load and some of them are squeezing and appearing in the graphs in the _dashboard_part.html.erb partial.

So there must be some conflict of some type to those graphs and partials, but I haven't been able to figure it out. So I really need help to figure this out.

The graphs in the _electro_part.html.erb partial (see below) are the once that seems to be conflicting with the _dashboard_part.html.erb partial.

Edit

Ok while I was inspecting the user/show.html.erb I noticed that when I hit the Electro tab this part of the last 3 charts in the _dashboard_part.html.erb changes from for example data-highcharts-chart="4" to data-highcharts-chart="42" . I´ve no Idea why those 3 charts are changing when I hit the electro tab, but it must be a related to this strange mixup.

this is the graph part of my users/show.html.erb were the partials are rendered.

<hr>

 <%= render 'users/shared/dashboard_part' %> #This is the part were the conflict seems to be happening, it´s all good when I comment this part out

<hr>
<div class="container">
  <ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#electro_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#electro', id: "electro_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

 <li role="presentation" >
  <%= link_to "Ræsting", "#cleaning_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#cleaning', id: "cleaning_tab"  %>
</li>

</ul>


<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>



  <div  role="tabpanel" class="tab-pane fade" id="electro">
  <div class="electro">
  <%= render 'pages/partials/electro_part' %> #This one seems to be conflicting with the _dashboard_part.html.erb
  </div>
  </div>

  <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
  <%= render 'pages/partials/hwater_part' %>
  </div>
  </div>

  <div  role="tabpanel" class="tab-pane fade" id="cleaning">
  <div class="cleaning">
  <%= render 'pages/partials/cleaning_part' %>
  </div>
  </div>

Here is the users/show.js.erb for the tabs to run smoothly

if($("#category_tabs li:first-child").hasClass("active")) {
$(".pappir").html("<%= j render(partial: 'pages/partials/paper_part') %>")
$(".electro").html('')
$(".hwater").html('')
$(".cleaning").html('')
} else 

if($("#category_tabs li:nth-child(2)").hasClass("active")) {
$(".electro").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>")
$(".hwater").html('')
$(".cleaning").html('')
$(".pappir").html('')
} else

if($("#category_tabs li:nth-child(3)").hasClass("active")) {
$(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>")
$(".cleaning").html('')
$(".pappir").html('')
$(".electro").html('')
} else

if($("#category_tabs li:nth-child(4)").hasClass("active")) {
$(".cleaning").html("<%= escape_javascript(render 'pages/partials/cleaning_part').html_safe %>")
$(".pappir").html('')
$(".electro").html('')
$(".hwater").html('')
} 

Here is the _dashboard_part.html.erb partial

<div class="row">

<!-- Pappirs graf -->
<div class="col-md-2 chart-box">
   <h4> Pappír </h4>
       <%= column_chart [
              {name: "Paper #{current_user.profile.name}", data: current_user.papers.group_by_year(:created_at, format:"%Y").sum(:paper_weight)},
              {name: "Paper all Avr", data: Paper.group_by_year(:created_at, format:"%Y").average(:paper_weight)}], { stacked: true, height: "250px", xtitle: "Pappírsmagn", ytitle: "Kg/Pappír"} %>
              <ul class="chart-box-nav">
             <li><p> <%= link_to "Setja Markmið", '#'  %> |</p></li> 
              <li><p> <%= link_to "Skrá Pappír", '#pappir'%> |</p></li>  
              <li><p> <%= link_to "Skoða nánar", '#pappir'%> </p></li> 
              </ul>
   </div>
<!-- Rafmagns graf -->
  <div class="col-md-2 chart-box">
   <h4> Rafmagn </h4>


    <%= column_chart [ 
              {name: "KWst notkun #{current_user.profile.name}", data: current_user.electros.group_by_year(:created_at, format:"%Y").sum(:electricity_kwst)},

              {name: "Meðaltal allra notenda", data: Electro.group_by_year(:created_at, format:"%Y").average(:electricity_kwst)}], { stacked: true, height: "250px", xtitle: "Rafmagnsnotkun", ytitle: "kwst/Rafmagn"} %>
               <ul class="chart-box-nav">
             <li><p> <%= link_to "Setja Markmið", '#'  %> |</p></li> 
              <li><p> <%= link_to "Skrá Rafmagn", '#rafmagn'%> |</p></li>  
              <li><p> <%= link_to "Skoða nánar", '#rafmagn'%> </p></li> 
              </ul>
    </div>
 <!-- Heitt vatn graf-->
      <div class="col-md-2 chart-box">
      <h4> Heitt vatn </h4>
    <%= column_chart [ 
              {name: "KWst notkun #{current_user.profile.name}", data: current_user.hwaters.group_by_year(:created_at, format:"%Y").sum(:hot_water_cubic_meter)},

              {name: "Meðaltal allra notenda", data: Hwater.group_by_year(:created_at, format:"%Y").average(:hot_water_cubic_meter)}], { stacked: true, height: "250px", xtitle: "Heitt vatn", ytitle: "m3/Heitt vatn"} %>

               <ul class="chart-box-nav">
                  <li><p> <%= link_to "Setja Markmið", '#'  %> |</p></li> 
                  <li><p> <%= link_to "Skrá Vatn", '#hwater'%> |</p></li>  
                  <li><p> <%= link_to "Skoða nánar", '#hwater'%> </p></li> 
              </ul>
      </div>
  <!-- Ræstiefni graf -->
        <div class="col-md-2 chart-box">
          <h4> Ræstiefni </h4>


    <%= column_chart [ 
              {name: "Notkun Ræstiefna #{current_user.profile.name}", data: current_user.cleanings.group_by_year(:created_at, format:"%Y").sum(:cleaning_liter)},

              {name: "þar af umhv.væn", data: current_user.cleanings.group_by_year(:created_at, format:"%Y").sum(:env_clean_ratio)}, { stacked: true, height: "250px", xtitle: "Ræstiefni", ytitle: "l/ræstiefni"},

               {name: "Notkun Ræstiefna allir", data: Cleaning.group_by_year(:created_at, format:"%Y").average(:cleaning_liter)},

              {name: "þar af umhv.væn", data: Cleaning.group_by_year(:created_at, format:"%Y").average(:env_clean_ratio)}], { stacked: true, height: "250px", xtitle: "Ræstiefni", ytitle: "l/ræstiefni"} %>

               <ul class="chart-box-nav">
             <li><p> <%= link_to "Setja Markmið", '#'  %> |</p></li> 
              <li><p> <%= link_to "Skrá Ræstiefni", '#cleaning'%> |</p></li>  
              <li><p> <%= link_to "Skoða nánar", '#cleaning'%> </p></li> 
              </ul>
      </div>

<!-- Flug co2 -->
          <div class="col-md-2 chart-box">
      <h4> Flug </h4>
    <%= column_chart [ 
              {name: "Co2 vegna flugferða ", data: current_user.transports.group_by_year(:created_at, format:"%Y").sum("transport_flight_km * 0.1722")},

              {name: "Co2 Allir flug", data: Transport.group_by_year(:created_at, format:"%Y").average("transport_flight_km * 0.1722")}], { stacked: true, height: "250px", 'interpolateNulls':true, xtitle: "Co2 vegna Flugferða", ytitle: "Kg/Co2"} %>

               <ul class="chart-box-nav">
             <li><p> <%= link_to "Setja Markmið", '#'  %> |</p></li> 
              <li><p> <%= link_to "Skrá Flug", '#flight'%> |</p></li>  
              <li><p> <%= link_to "Skoða nánar", '#flight'%> </p></li> 
              </ul>
      </div>

<!-- Akstur co2 -->
          <div class="col-md-2 chart-box">
      <h4> Akstur </h4> 
    <%= column_chart [ 
              {name: "Co2 vegna Akstur ", data: current_user.transports.group_by_year(:created_at, format:"%Y").sum("transport_flight_km * 0.1404")},

              {name: "Co2 Allir Akstur", data: Transport.group_by_year(:created_at, format:"%Y").average("transport_flight_km * 0.1404")}], { stacked: true, height: "250px", 'interpolateNulls':true, xtitle: "Co2 vegna Aksturs", ytitle: "Kg/Co2"} %>
               <ul class="chart-box-nav">
             <li><p> <%= link_to "Setja Markmið", '#'  %> |</p></li> 
              <li><p> <%= link_to "Skrá ferðir", '#travel'%> |</p></li>  
              <li><p> <%= link_to "Skoða nánar", '#travel'%> </p></li> 
              </ul>
      </div>        

then here is the code in the the _electro_part.html.erb

<!-- KWst rafmagn/ mv.stöðug.  -->

    <div class="row">
             <div class="col-md-8 mod-md-9 ">

                <div class="col-md-2 user-box">
                    <p>Heildar kwst notkun</p>
                    <h2><%= @electro_total.to_f %><small class="user-eining"> - Kwst</small></h2>
                </div>  

                <div class="col-md-2 user-box">
                    <p>Kwst á hvert stöðugildi</p>
                    <h2><%= @electro_total_per_capita %><small class="user-eining"> - Kwst</small></h2>
                </div>  

                <div class="col-md-2 user-box">
                    <p>Kwst mv. hvern m&sup2;</p>
                    <h2><%= number_with_precision(@electro_total_per_m2.to_f, precision: 2)%><small class="user-eining"> -kwst/m&sup2;</small></h2>
                </div>  


    </div>  

            <div class="col-md-4 clear-fix">


                <%= render 'pages/partials/new_electro_part' %>

            </div>  
<div class="row">
<div class="col-md-12"> # these charts below seems to be somehow conflicting with the graphs in the _dashboard_part.html.erb
                    <div class="col-md-4 chart-box">

                     <%= line_chart [
                     {name: "Rafmagn #{current_user.profile.name}", data: current_user.electros.group_by_month(:updated_at).sum(:electricity_kwst)},
                     {name: "Rafmagnsnotkun Aðrir mt", data: Electro.group_by_month(:updated_at).average(:electricity_kwst)}], { stacked: true, height: "300px", xtitle: "Rafmagnsnotkun", ytitle: "Kwst/rafmagn"} %>

                    </div>



        <div class="col-md-4 chart-box">


                         <%= column_chart [
              {name: "Rafmagn #{current_user.profile.name}", data: current_user.electros.group(:building_name).sum(:electricity_kwst)}], {  height: "300px", xtitle: "Rafmagnsnotkun/bygging", ytitle: "kwst/Rafmagn"} %>
                    </div>



        <div class="col-md-4 chart-box">

                     <%= column_chart [
              {name: "Rafmagns kostnaður #{current_user.profile.name}", data: current_user.electros.group_by_month(:date, format:"%B").sum(:electricity_kwst)},
              {name: "Kostnaður Allir", data: Electro.group_by_month(:updated_at, format:"%B").average(:electricity_kwst)}], { stacked: true, height: "300px", xtitle: "Tímabil", ytitle: "Kostnaður/Rafmagn"} %>

                    </div>


         </div> 
     </div>
  </div>                

Edit

this is the pages/partial/_new_electro_part.html.erb

<div class="well">
<%= form_for @electro, html: {class: 'form-horizontal'} do |f| %>

<div class="control-group"> 
    <%= f.label :Dagsetning, class: 'control-label' %><br>
        <div class="controls">
            <%= f.date_select :date %>
        </div>
</div>  

  <div class="control-group">   
    <%= f.label :Bygging, class: 'control-label' %><br>
        <div class="controls">
            <%= f.text_field :building_name %>
      </div>
</div>  

<div class="control-group"> 
    <%= f.label :Rafmagn_kwst, class: 'control-label' %><br>
        <div class="controls">
            <%= f.number_field :electricity_kwst %>
        </div>
  </div>    

  <div class="control-group">   
    <%= f.label :Rafmagn_kostnaður, class: 'control-label' %><br>
        <div class="controls">
            <%= f.number_field :electricity_cost %>
        </div>
  </div>    




  <div class="control-group">
    <div class="controls">
      <%= f.submit class: 'btn btn-xs btn-warning' %>
    </div>  
  </div>

  <% end %>
   <%= link_to 'Skoða allar færslur', electros_path %>  
  </div>

Answer 1

DAMN. It took me 2 days to find out what happens. I ran into the same issues.

Short and simple: You have to set the id of the chart on your own. Otherwise the ajax call will confound the charts.

If you want to know what really happens: https://github.com/ankane/chartkick/issues/193

So just do something like this:

<%= line_chart data,
               id: random_charkick_id,
               width: "200px", height: "80px" %>

and in your helper:

def random_charkick_id
    return 'chart-#'+(Random.rand(10000)).to_s
  end

I hope this answer is not too late for you.