[visualization-api] using tabs with visualizations

[Scott G]

I've been working on a gadget that gets data from a Google docs
spreadsheet and uses the Visualization API to chart different data
blocks on different tabs. I insert the gadget on the Google
spreadsheet and
then use the Publish script to embed it on other web pages.

Things work splendidly, with one exception: the visualization doesn't
draw correctly on the first tab, although it looks fine on other tabs,
and when you come back to the first one. I am using dynamic tabs--not
because I need to dynamically update the data, but I like using the
callback function.

The problem with drawing the first tab seems to be a problem with
getting the right size container (although I've put in an alert
statement and gotten back the dimensions I expect). I think I've
followed the tab examples,
although all the ones I've seen write text rather than draw graphics
in each tab container.

See http://spreadsheets.google.com/ccc?key=pG5S5OAPqhLoeAPNQ-7q8ew&hl=en
for an example. You can see that the visualization tries to draw, but
appears only in a small box at the top left corner of the first tab.
But if you click to another tab, and click back, it appears correctly.

Here are pertinent excerpts of the code:

<![CDATA[

<script src="http://www.google.com/jsapi"; type="text/javascript"></
script>

<div id="SUSAchart" style="overflow: auto;">
<div id="chartheader" style="overflow: auto;">
<img src="http://susa.scottgilkeson.com/gadgets/
embedbanner.jpg">&nbsp;<big><strong>Health Indicator</strong></
big><br />
<img src="http://www.google.com/ig/images/spinner.gif"; />
</div>
<div id="tabs_div" style="overflow: auto;">
</div>
<div id="chartfooter" style="overflow: auto;"></div>
<div id="toolbar_div"></div>
</div>

<script>
...
_IG_RegisterOnloadHandler(loadVisualizationAPI);

function loadVisualizationAPI() {
  google.load("visualization", "1", {packages: ['linechart']});
  google.setOnLoadCallback(sendQuery);

}

function sendQuery() {
  gadgetHelper = new google.visualization.GadgetHelper();
  var query = gadgetHelper.createQueryFromPrefs(prefs);
  query.send(handleQueryResponse);

}

function handleQueryResponse(response) {
...
  // create header and footer HTML, read tab names, etc.

  var headerdiv = _gel('chartheader');
  headerdiv.innerHTML = headerhtml.join('');

  if (tabs == null) {
     var tabdiv = _gel('tabs_div');
     tabs = new _IG_Tabs(__MODULE_ID__, tabnames[0], tabdiv);
     for (i=0; i<tabnames.length; i++) {
        tabs.addDynamicTab(tabnames[i], tabcallback);
     }
  }

  var footerdiv = _gel('chartfooter');
  footerdiv.innerHTML = footerhtml.join('');

  drawToolbar();

}

function tabcallback(tabId) {
  var selectedTab = tabs.getSelectedTab();
  var byNum = selectedTab.getIndex();
  // create a data table for this index
  ...
  var container = selectedTab.getContentContainer();
  container.innerHTML = '';
  container.style.width = document.body.clientWidth + 'px';
  container.style.height = prefs.getInt('chartheight') + 'px';
        //alert('container ' + document.body.clientWidth + ' x ' +
prefs.getInt('chartheight'));
        // when uncommented, this alert shows that the container is
573 x 320
  lineChart = new google.visualization.LineChart(container);
  lineChart.draw(datatable, options);
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To post to this group, send email to google-visualization-api@googlegroups.com
To unsubscribe from this group, send email to 
google-visualization-api+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en
-~----------~----~----~----~------~----~------~--~---