redraw google charts on hidden bootstrap tab pane

Question

I am using google scatter chart in my web app and it loads on document ready. I recently did some restructuring and trying to divide the page content in different bootstrap tabs

Answer 1

Just incase other people are looking for a simpler solution.

An alternative is to implement the following:

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

This will cause the chart to re-draw as if the browser was resized.