Bootstrap Tabs + Chartkick: No chart until Inspect Element on latest Chrome about chartkick

[ankane]

Chartkick now has a redraw function for this. (on master)

Chartkick.charts["chart-id"].redraw()

[fabionl]

Krainboltgreene, your example didnt include the chart library, it's showing a javascript error.

"GET http://fiddle.jshell.net/zPEML/show/chartkick.js 404 (Not Found)"

I dont know how to include the lib on jsfiddle. :(

[krainboltgreene]

That's very weird, but at least you can reproduce the idea locally now.

[ankane]

The jsfiddle demo is missing the Google Charts library on the generated page. Once I add it above chartkick.js, the example works. Does this solve the problem?

[rapcal]

I had the same issue. It seems Google Charts doesn't draw when the chart container is hidden.

Using the inspector or Firebug if you're on Firefox make it work because you're resizing the window and chartkick.js redraws the chart on resize.

To fix that, I added a js call to render the chart only when the element is displayed.

Hope this helps.

[harold-s]

Hello,

I have a similar problem on Foundation. If i render a chart inside a non active (hidden) tab. The size is wrong.
How did you render the chart on display ?

Thanks !

[rapcal]

On your JS:

$(document).on "click", ".show-chart", (event) ->
    id = $(this).parents(".panel-heading").attr("id")
    $(this).children(".panel-body").load("/show_chart?type=#{id}")

Your show_chart action would render a partial that would handle all the different chart types, like so:

<% case params[:type] %>
    <% when 'pending_tasks_by_user' %>
        <%= pie_chart something %>
    <% when 'complete_tasks_by_user' %>
        <%= bar_chart something_else %>
<% end %>

Hope this helps!

[ankane]

For this, I'd be nice to be able to trigger an event on the chart that renders it.

// jquery version
$("#users-chart").trigger("chartkick:render")

[harold-s]

Thanks a lot, it helped !

[jonathanstiansen]

@rapcal I've been having trouble with this too, but I don't really get how your example corresponds to anything. I'm not understanding how it can work, when I attempt to do something like you're doing, the jquery renders the JSON.

Here's the code $( '#my_div_with_chart' ).load( "/my_chart_endpoint");

[rapcal]

Hm... What do you have on your partial?

[firewalker06]

@ankane How to trigger redraw chart with jQuery? I have tried these but still doesn't work:

$('#chart').trigger('chartkick:render');
$('#chart').trigger('chartkick:resize');
$(window).trigger('resize');

[naoa]

This is worked well in my environment.

window.dispatchEvent new Event('resize')

[bqst]

This is my fix :

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var ev = document.createEvent('Event');
    ev.initEvent('resize', true, true);
    window.dispatchEvent(ev);
  });

[whilei]

@bqst that works for me! thanks!

[trungnguyencmu]

@bqst: That works but I have new problem http://prntscr.com/bh09ho