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 visualisation to the tab that's displayed by default when the page loads then the bar chard displays correctly, however, if I add the same control to another tab and reload the page, when I click on the other tab, the control is displayed, but its tiny and unusable. Please help! Here's some code for a test.aspx page that illustrates the problem: <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestProject._Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head id="Head1" runat="server"> <title></title> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript"> google.load('visualization', '1', { packages: ['columnchart'] }); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Height'); data.addRows(3); data.setCell(0, 0, 'Tong Ning mu'); data.setCell(1, 0, 'Huang Ang fa'); data.setCell(2, 0, 'Teng nu'); data.setCell(0, 1, 174); data.setCell(1, 1, 523); data.setCell(2, 1, 86); // Create and draw the visualizations. new google.visualization.ColumnChart(document.getElementById('visualization1')). draw(data, null); new google.visualization.ColumnChart(document.getElementById('visualization2')). draw(data, null); } google.setOnLoadCallback(drawVisualization); </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <ContentTemplate> <div id="visualization1" style="width: 300px; height: 300px;"> </div> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2"> <ContentTemplate> <div id="visualization2" style="width: 300px; height: 300px;"> </div> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </div> </form> </body> </html> -- 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.
