Chartkick (google charts gem) is ignoring my rendering instructions and squeezing charts after adding bootstrap's collapse functionality

Question

I'm on rails, using the 'twitter-bootstrap-rails' gem, version 3.2.2 which may or may not be relevant to the diagnosis here.

So basically I've used some documentation examples online to get a panel-collapsing functionality on a little data visualization application I've made using the chartkick gem. I got the collapsibility functionality, but now the charts inside of my collapsible divs are getting squeezed into 400px X 200px rect elements despite my instructions for height and width being added.

Here's what the charts should look like. These are the charts that have not been placed into collapsible div elements (I'm the real estate developer here as well so not worried about privacy w/ regards to data)

And here's what the squeezed charts inside of the collapsible divs look like:

What's even stranger is that I had to reload the page to get the bug to show itself, because in the time it took me to write this question, the chart had somehow fixed itself. Happens randomly but normally takes at least a minute. Sometimes I can get it to "fix itself" if I open up the web inspector and point to the elements. This is what it looks like after a spontaneous self-fix:

The self fix only worked for the already-collapsed div elements. The uncollapsed elements remain shrunken after being expanded, at least initially.

code for the index.html.erb page for the properties controller. Nothing proprietary here really.

<h1>Properties</h1>
    <% @properties.each do |p| %>
        <div class="panel panel-default">
            <div class="panel-heading"><h3><%= p.name %> Hard & Soft Costs Per Draw</h3></div>
            <div class="panel-body">
                <% hard_costs = p.hard_costs %>
                <% soft_costs = p.soft_costs %>     
                <% construction_contract_estimates = hard_costs.map(&:sv_construction_contract) %>
                <%= construction_contract_estimates.pctg_change %> Change in Construction Contract Estimate from Draw 1 to Draw <%= hard_costs.last.draw_i %>
                <%= column_chart [{:name => "Hard Cost Left to Go", :data => hard_costs.map{|hc| [hc.draw_i, hc.b2f_construction_contract.to_i]}}, {:name => "Hard Cost Draw", :data => hard_costs.map{|hc| [hc.draw_i, hc.cd_construction_contract.to_i]}}, {:name => "Total Hard Cost Estimate", :data => hard_costs.map{|hc| [hc.draw_i, hc.sv_construction_contract.to_i]}} ], :height => "800px" %>
                <%= column_chart hard_costs.map{|r| [r.draw_i, r.cd_construction_contract] }%>

                <%# collapsible column chart 1%>
                <div class="panel panel-default" style="display: block;">
                    <% softcosts_pd_graph_id = "#{p.name.sanitize}_scpd_chart_id" %>
                    <div class="panel-heading">Soft Costs Per Draw Graph (<a href="#<%= softcosts_pd_graph_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
                    <div class="panel-body collapse" id="<%= softcosts_pd_graph_id %>">
                        <%= column_chart p.soft_costs.map{|sc| [sc.draw_i, sc.cd_total_soft_costs.to_i] } , :library => {:xtitle => "Draw #", :ytitle => "Soft Cost Draw", :width => "800px"}  %>
                    </div>
                </div>

                <%# collapsible series of pie charts %>
                <div class="panel panel-default" style="display: block;">
                    <% softcosts_pd_pies_id = "#{p.name.sanitize}_scpd_pies_id"%>
                    <%# figure out how to use glyph icons and use 'glyphicon-collapse-down' and '...-up' %>
                    <div class="panel-heading">Soft Costs Per Draw Pie Charts (<a href="#<%= softcosts_pd_pies_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
                    <div class="panel-body collapse" id="<%= softcosts_pd_pies_id %>">
                        <ul class="list-group">
                            <% p.soft_costs.each do |sc| %>
                                <li class="list-group-item">Draw <%= sc.draw_i %>:          
                                    <h4>Soft Cost Draw #<%= sc.draw_i %>: <%= number_to_currency sc.cd_total_soft_costs %> </h4>
                                    <%= pie_chart sc.breakdown_chart_data.sort_by{|x,y| y}.reverse, :library => {:legend => {position: "right"} } %>
                                </li>
                            <% end %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    <% end %>

Code taken from client web browser: gist

Thanks! Hope I've made it as easy as possible for someone to assist

Also, while we're on this subject of handling the rect boxes created by chartkick, does anyone know how to edit the height and width of the rect box serving as an outer container for the chart itself? There's too much buffer here.

Answer 1

I had the same problem with Chartkick in foundation-rails. The problem is that the resize event handlers are not triggered when expanding.

For example, I had the following code in a js file for my expandable elements:

$(function() {
$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        $(this).siblings('.child-'+this.id).toggle();
    });
$('tr[class^=child-]').hide().children('td'); });

I added the following under the click event to trigger the resize event handlers:

var evt = document.createEvent('Event');
evt.initEvent('resize', true, true);
window.dispatchEvent(evt);

This works just fine:

$(function() {
$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        $(this).siblings('.child-'+this.id).toggle();
        var evt = document.createEvent('Event');
        evt.initEvent('resize', true, true);
        window.dispatchEvent(evt);
    });
$('tr[class^=child-]').hide().children('td'); });

There might be a better way to do this, but it's a good start.