Google visualization is small inside AJAX Control Toolkit Tab Control

Question

I\'m trying to use a google visualisation, the column chart, inside an asp.net AJAX Toolkit Tab Control, but I\'m having small (literally) problems.

If I add the visual

Answer 1

Ok, I didn't get a single response to this post so here is how I worked around the problem, hope it helps someone.

I never actually got the the root of this problem but I found that if I delayed the loading of the Visualisations till the tab that contains it is clicked then the problem goes away.

In the TabControl I call a JavaScript function to load the tabs visualisation when clicked:

The JavaScript function

function tabChanged(sender, args) {
        var ActiveTab = sender.get_activeTabIndex();
        if (sender.get_activeTabIndex() == 0) {
            if (tab0Loaded != true) { 
                //load the visualisation
                new google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);
                tab0Loaded = true
            }
        }
        if (sender.get_activeTabIndex() == 1) {
            if (tab1Loaded != true) { 
                //load the visualisation
                new google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);
                tab1Loaded = true
            }
        }

 }

During postback the active tab could change, to cope with this I have a JavaScript function that executes when the page loads, if the current active tab is one containing a visualisation then I load it.