pagination / Zurb Foundation causing Morris.js chart rendering issues

Question

I have a Rails 4 app with paginated charts using Morris.js. Until adding Zurb Foundation to the mix, everything was working fine. However, after adding Foundation, strange things have been happening to my charts.

Scenario:

Upon loading url with paginated charts, multiple SVGs containing chart elements are rendered, which cascade down the page. If I reload the page, the chart is displayed correctly and only a single SVG is present. If I then click on another of the pagination links, cascading SVG's again until I reload. Rinse and repeat.

I've tried manually fixing the height of the div containing the chart, but as I expected, this didn't help. I don't necessarily think it's a resizing issue, but not really sure what's going on.

Thanks for any ideas/help.

application.js (manifest)

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require foundation
//= require raphael
//= require morris.min
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

morris_bar_chart.js

$(document).ready(function() {
    //alert('DOM has loaded.');
    new Morris.Bar({
      element: 'responses_chart',                       // ID of the chart element
      data: $('#responses_chart').data('responses'),    // Chart data
      xkey: 'choice_content',                            
      ykeys: ['pip_sum'],
      labels: ['Sum']
    });
});

charts_presentation.html.erb

<% provide(:title, 'Presentation') %>

<div class="row">
  <div class="large-10 small-centered columns">
    <h2 id="page-title" class="subheader">
      <%= @question_set.title %></h2>
  </div>
</div>    
  <ol>
    <% @questions.each do |question| %>
      <li id="chart_box"> 
        <h3><%= question.content %></h3>
          <%= content_tag :div, "", id: "responses_chart",
            data: { responses: response_chart_data_for(question) } %>
      </li>
    <% end %>
  </ol>
<div class="pagination-centered">
  <%= will_paginate %>
</div>

Rendering incorrectly (console log):

<div id="responses_chart" data-responses="[{"choice_content":"8 on a Wednesday morning","pip_sum":2},{"choice_content":"8 on a Wednesday afternoon","pip_sum":1},{"choice_content":"8 (eight)","pip_sum":1},{"choice_content":"9PM on a Tuesday","pip_sum":0}]" style="position: relative;">
<svg height="2839" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="1416" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="705" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="349" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<svg height="342" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
<div class="morris-hover morris-default-style" style="left: 221.292px; top: 2811px;">
</div>
</li>

Rendering correctly, after reloading:

<div id="responses_chart" data-responses="[{"choice_content":"8 on a Wednesday morning","pip_sum":2},{"choice_content":"8 on a Wednesday afternoon","pip_sum":1},{"choice_content":"8 (eight)","pip_sum":1},{"choice_content":"9PM on a Tuesday","pip_sum":0}]" style="position: relative;">
<svg height="342" version="1.1" width="781" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.233337px; top: 0.200012px;">
<div class="morris-hover morris-default-style" style="left: 46.7083px; top: 143px;">
</div>
</li>

Answer 1

I thought I'd try removing the jQuery-turbolinks gem, and wouldn't you know, my charts are functioning normally. Although I'll need to do some follow-up to understand this better, this fixed my issue.