jQuery AnythingSlider not displaying multiple Google Visualization API charts

Question

Hopefully someone out there is familiar w/the AnythingSlider tool...

Here's the deal: I am able to put all sorts of content into this tool (which really just uses one set of < li > tags per div or whatever content you want to put per slide. I have no problem putting Google Maps, Google StreetView, pics, etc in this thing at the same time. But when I try to use multiple charts created with the Google Vis API, only the first one listed will display. When I remove the second chart from the slider and put it somewhere else on the page, it shows up fine. I really need to get it into the slider and working.

Here's an example of my script that creates the two charts:

google.load('visualization', '1', {'packages':['geomap', 'corechart']});

// Set a callback to run when the API is loaded.
google.setOnLoadCallback(drawExistMap);
google.setOnLoadCallback(drawTrussChart);

// Callback that creates and populates a data table
function drawExistMap() {
var data = new google.visualization.DataTable();

//do a bunch of stuff here to populate the table and create the chart

//Create the table visualization object and call the draw method on it.
var container = document.getElementById('existMap');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);

}

//drawTrussChart creates pie chart showing truss types of returned bridges
function drawTrussChart() {
//do more stuff similar to the above ......
var chart = new google.visualization.PieChart(document.getElementById('TTChart_div'));
chart.draw(data, options);
}

//The slider on my page looks like:
<!-- AnythingSlider #1 -->
<ul id="slider1">
    <li><div id="existMap"></div></li>
    <li><div id="TTChart_div"></div></li>
</ul>

Again, if I move div TTChart_div out of the slider and put it elsewhere on the page, the chart displays just fine.

I've tried placing other content in the last slide (there's actually four slides, not just these two). If it's an image or text or something like that, it shows up in that slide. but if it's the chart.. it won't go.

UPDATE: I've experimented w/this a bit and thrown as many as 3 charts into the slider. It's ONLY when a chart div is in the LAST tab (li tag) that it doesn't display. So, let's say I have 5 tabs/slides and I place the 3 charts in the middle three tabs, they all display! But if one of those charts is in the last tab, it doesn't show up. Unfortunately, my needs are that this stupid thing is in the last slide so now I'm not sure what I can do.

Answer 1

The problem is that AnythingSlider creates a copy of the first and last tab and puts them at either end so the animation is smooth. I think the best solution would be to change the chart ID to a class and then create the chart after the AnythingSlider is initialized. Something like this:

Script

//drawTrussChart creates pie chart showing truss types of returned bridges
function drawTrussChart() {
 //do more stuff similar to the above ......
 var chart = new google.visualization.PieChart( $('.TTChart_div')[0] ); // target class
 chart.draw(data, options);
}

// Initialize Slider first
$('#slider1').anythingSlider(...);

// After anythingSlider is set up, initialize the charts
drawTrussChart();

HTML

<!-- AnythingSlider #1 -->
<ul id="slider1">
 <li><div class="existMap"></div></li>
 <li><div class="TTChart_div"></div></li>
</ul>