IE, ColumnCharts, Jquery accordion

[Al]

I'm getting strange result when using the Accordion with a google column chart in IE (7/8/9). It is dropping the legend vAxis values and column title.

It works fine in Firefox(12) / Chrome / Safari.

If I change the h3 tag (used for the accordian header) to h4 all the GV API images render correctly.

See attachment 1 for how it should look (FF12)

See attachment 2 for IE error.

See attachment 3 for non-accordion IE version.

Any guidance, pointers or suggestions will be very gratefully received. I have also posted this to JQuery UI forum

Thanks 

Alan

[asgallant]

At a guess, I would say that you are drawing those charts after the accordion effect is enabled, right?  If so, then they are being rendered in a hidden div, which is known to cause problems.  You'll have to enable the accordion effect after the charts finish drawing to make it work.

[Al]

Thanks asgallant, really appreciate the feedback.

Supplementary question:

I have delayed the accordion initialisation until the document.ready event fired but this occurs before the google.onLoadCallback event fires so the result remains the same. 

Is there another approach I can take?

[asgallant]

If you are drawing the charts as a part of a Dashboard, this is fairly straightforward: you need to initialize your accordian function in a 'ready' event handler for the dashboard, like this:

var dash = new google.visualization.Dashboard(document.getElementById('chart_div'));
google.visualization.events.addListener(dash, 'ready', function () {
    // initialize accordian function here
});​​​​​ 

If you are drawing them separately, then this becomes slightly more complicated, as you have to wait for all of the charts to finish drawing.  Something like this should work:

var charts = {
    chart1: {
        chart: new google.visualization.ChartWrapper({/*wrapper setup*/}),
        ready: false
    },
    chart2: {
        chart: new google.visualization.ChartWrapper({/*wrapper setup*/}),
        ready: false
    }
    // ...
};

for (i in charts) {
    google.visualization.events.addListener(charts[i].chart, 'ready', (function (x) {
        charts[x].ready = true;
        var allReady = true;
        for (j in charts) {
            allReady = (allReady && charts[j].ready);
            if (allReady == false) {
                break;
            }
        }
        if (allReady) {
            // initialize accordian function here
        }
    })(i));
} 

That will handle an arbitrary number of charts; if you only have two, then you can simplify it:

var chart1 = new google.visualization.ChartWrapper({/*wrapper setup*/});
var chart2 = new google.visualization.ChartWrapper({/*wrapper setup*/});
var otherDone = false;

google.visualization.events.addListener(chart1, 'ready', function (x) {
    if (otherDone) {
        // initialize accordian function here
    }
    else {
        otherDone = true;
    }
}); 

google.visualization.events.addListener(chart2, 'ready', function (x) {
    if (otherDone) {
        // initialize accordian function here
    }
    else {
        otherDone = true;
    }
}); 

[alan stone]

Brilliant Drew, thank you. It works, still have IE clunkyness and you get the non accordion view before it all redraws itself properly

I modified the routines slightly and appended the ready listner function below so you can see the differences

Alan

function onReady() {

if ( typeof onReady.chartsReady == 'undefined' ) {

       // First call, initialise counter

onReady.chartsReady = 0;

   }

   // Increment the number of ready events captured (6 charts)

   ++onReady.chartsReady;

   if (onReady.chartsReady == 6) {

   // Initialise our accordion

   $("#accordion").accordion({

            autoHeight:false,

                navigation:true,

                collapsible:false,

                header:"h3"

            });

   }

}

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/T8cMfDtnXbAJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.