Thanks for the reply. A very odd thing happens. Once select different dates via the controls, all is well. So I'll just find a way to simulate a "control change" when the page loads.
FYI the display: none is for the controls. I'm using other methods to select date ranges ;-) On Monday, July 1, 2013 10:21:41 AM UTC-4, Sergey wrote: > > Hi, the issue here is that you can't draw charts in elements with > 'display:none'. The solutions for this are as follows: > > - Render the charts in elements with 'visibility:hidden' instead of > 'display:none' > - Render the charts in visible divs, then hide them > - Render the charts on demand > > Hope that helps! > > > - Sergey > > > On Fri, Jun 28, 2013 at 6:59 PM, John Smith <[email protected]<javascript:> > > wrote: > >> Hi, >> >> I'm trying to embed a chart into a collapsible section of a web page. >> I've tried 2 different systems and get the same >> results. I'm not sure what's going on here or how to fix it. >> >> system 1) http://www.boutell.com/newfaq/creating/outline.html >> >> system 2) http://redhotsly.github.io/simple-expand/# >> >> here's the code I'm using (via system #2) >> >> <!DOCTYPE html> >> <html> >> <head> >> <link rel="stylesheet" href="css/simple-expand.css" type="text/css"> >> <script type="text/javascript" >> src="css/jquery-1.10.1.min.js"></script> >> <script type="text/javascript" src="css/simple-expand.js"></script> >> <script type="text/javascript"> >> $(function () { >> $('.expander').simpleexpand(); >> }); >> </script> >> <script type="text/javascript" src="http://www.google.com/jsapi >> "></script> >> <script type="text/javascript">google.load('visualization', '1.1', >> {packages: ['corechart','controls']}); </script> >> <script src="css/98kills.js" type="text/javascript"> </script> >> >> </head> >> >> <body onload="drawkills();"> >> >> <div class="demo-frame"> >> <a id= "expander6" class="expander toggle" href="#">click me</a> >> <ul class="content"> >> <div id="dashboard" style='width: 915px; height: 300px;'> >> <div id="killchart" style='width: 915px; height: 300px;'></div> >> <div id="killcontrol" style='display: none'></div> >> </div> >> </ul> >> </div> >> >> >> </body> >> </html> >> >> >> >> >> If use these 4 lines >> >> <div id="dashboard" style='width: 915px; height: 300px;'> >> <div id="killchart" style='width: 915px; height: 300px;'></div> >> <div id="killcontrol" style='display: none'></div> >> </div> >> >> outside of the collapsible section, all is well. Inside, things get >> smaller. Here's a screencap >> that might be useful: >> >> http://i.imgur.com/T2JxQCz.png >> >> what do? :-) >> >> >> >> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Visualization API" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]<javascript:> >> . >> To post to this group, send email to >> [email protected]<javascript:> >> . >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> For more options, visit https://groups.google.com/groups/opt_out. >> >> >> > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
