Drawing Google Chart in hidden elements

Question

Trying do render Google charts in hidden elements without lucky. The fiddle bellow has an example with bootstrap tabs:

Fiddle

Got some help from Andrew here: How to draw a google chart when a tab is showed? but the chart now is re-rendering anytime I interact with it, (for example with the range filter).

The HTML code is:

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs" data-tabs="tabs">
            <li class="active">
                <a href="#A" data-toggle="tab">Tab A</a>
            </li>
            <li class="">
               <a href="#B" data-toggle="tab">Tab B</a>
            </li>
            <li class="">
                <a href="#C" data-toggle="tab">Tab C</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="A">
                <div id='ChartA'></div>
            </div>
            <div class="tab-pane" id="B">
                <div id='ChartB'></div>
            </div>
            <div class="tab-pane" id="C">
                <div id='ChartC'></div>
            </div>
        </div>
    </div>
</div>

All the JS code is in the fiddle.

Terrazzo

Hmm...you need to hook into Bootstrap's tab events somehow. I'll look into them to see if I can figure this out. – Esdras

Answer 1

A simple example, all I'm doing here is reloading the graphs when the tabs show event gets fired for each tab. I'm sure there's a more elegant solution but it does the job.

$("a[href='#A']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartA
    });
});

$("a[href='#B']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartB
    });
});

$("a[href='#C']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartC
    });
});

Jinajingle

thanks! It works. I found it weird if I keep clicking in the tabs, the navigation become slow ans slower. But it really did the job. Thanks again. – Terrazzo

It might be a memory leak. I would read the documentation further and see if there's a better method for the job than simply calling google.load all the time. You might have to add an additional event callback for when the tab is closed and remove all the old graph references. – Jinajingle

Have a look at this ticket, the response towards the bottom suggests calling the clearChart() function. – Jinajingle

Answer 2

Simple as that:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));
});

Illogical

in your js file – Illogical

Thank you, it is exactly what I looked for. Important note: the jquery binding should be defined after tab's html code. My way: $('a[data-toggle="tab"]').click(() => window.dispatchEvent(new Event('resize'))) – Gusella