One thing I didn't mention is that the charts render properly in Chrome and Safari. The problem problem can be duplicated in IE and Firefox.
On Jun 1, 1:32 pm, Girum <[email protected]> wrote: > Hi all, > > I am developing a gadget that displays charts in tabs. I am having > issues with axis labels overlapping or disappearing on the 'non- > default' tabs after the gadget has loaded. I have a sample code to > illustrate the problem. I have tested drawing the charts on a single > page and that is no problem. The problem comes up only when I put > them in tabs. I have played around with specifying the dimensions of > the canvas but to no avail. Can anybody help me with this? > > Thanks! > > Full gadget code: > > <?xml version="1.0" encoding="UTF-8"?> > <Module> > <ModulePrefs width="500" height="400" title=""> > <Require feature="tabs" /> > </ModulePrefs> > > <Content type="html"> > <![CDATA[ > <script src="http://www.google.com/jsapi"; > type="text/javascript"></script> > > <div id="div1"></div> > <div id="div2"></div> > <div id="div3"></div> > > <script type="text/javascript"> > var tabs = new gadgets.TabSet > (__MODULE_ID__,"Tab1"); > > function init() { > google.load("visualization", > "1", {"packages": ["columnchart"]}); > > tabs.addTab("Tab1", > {contentContainer: document.getElementById("div1")}); > tabs.addTab("Tab2", > {contentContainer: document.getElementById("div2")}); > tabs.addTab("Tab3", > {contentContainer: document.getElementById("div3")}); > > google.setOnLoadCallback > (drawCharts); > } > > function drawCharts() { > var chart1 = new > google.visualization.ColumnChart(_gel('div1')); > var chart2 = new > google.visualization.ColumnChart(_gel('div2')); > var chart3 = new > google.visualization.ColumnChart(_gel('div3')); > > var data = new > google.visualization.DataTable(); > data.addColumn('string', > 'Name'); > data.addColumn('number', > 'Height'); > data.addRows(3); > data.setCell(0, 0, 'A'); > data.setCell(1, 0, 'B'); > data.setCell(0, 1, 100); > data.setCell(1, 1, 50); > > var chartoptions = { > width: 300, height: > 300, > is3D: true, > min: 0, > titleY: 'Y-axis > title', > titleX:'X-axis title' > } > > chart1.draw > (data,chartoptions); > chart2.draw > (data,chartoptions); > chart3.draw > (data,chartoptions); > }; > > _IG_RegisterOnloadHandler(init); > > </script> > ]]> > </Content> > </Module> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en -~----------~----~----~----~------~----~------~--~---
