Is the expandable section collapsed when the page loads? If so, the it has
"display: none" set and could be causing the issues. Put the expander's
initialization call in a "ready" event handler for the chart:
google.visualization.events.addListener(chart, 'ready', function () {
$('.expander').simpleexpand();
});
You left out your chart code, but am I correct in assuming your drawing
function is "drawKills"? If so, then firing that function in the "onload"
even of the body is going to make the charts draw before the API is done
loading, and will thus cause problems. You must use the
google.setOnLoadCallback function (or put the function name in the
"callback" parameter of the google loader) to fire your drawing function.
On Sunday, July 7, 2013 3:10:17 PM UTC-4, John Smith wrote:
>
> 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]> 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].
>>> 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.
>>>
>>>
>>>
>>
>>
--
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.
