Hi Marc,

How the google.load() call behaves depends on *when* it is called.  You can
call it within a function, but then it depends on *when* that function is
called. The key difference regarding *when* is whether the document is
still being loaded or the document has already finished loading.    If the
document has finished loading, then you need to add a 'callback' property
to your google.load() call, like so:

google.load('visualization', '1', {'packages':['corechart'],
*'callback': drawChart*})


The reason is that, without the 'callback' property, google.load will
assume the document is still being loaded, and when it writes a script tag
out to load the visualization library, that will *replace* your already
loaded document rather than add to it.



On Thu, Apr 17, 2014 at 2:41 AM, Marc Locchi <[email protected]> wrote:

> I am using Google Charts for the first time. I have copied their basic
> example of pie chart into my page and have included Google jsapi in my
> header.
>
> I have added the following code to my page:
>
> <div id="mychartid"></div>
>
> <script type="text/javascript">
>       // Load the Visualization API and the piechart package.
>       google.load('visualization', '1', {'packages':['corechart']});
>
>       // Set a callback to run when the Google Visualization API is loaded.
>       google.setOnLoadCallback(drawChart);
>
>       // Callback that creates and populates a data table,
>       // instantiates the pie chart, passes in the data and
>       // draws it.
>       function drawChart() {
>
>         // Create and populate the data table.
>         var data = google.visualization.arrayToDataTable([
>               ['Products', '# Products'],
>               ['New', eval(sessionStorage.new_menu)],
>               ['Current', eval(sessionStorage.cur_menu)],
>               ['Retired', eval(sessionStorage.ret_menu)]
>         ]);
>
>         // Create and draw the visualization.
>         new 
> google.visualization.PieChart(document.getElementById('mychartid')).
>                 draw(data, {title:"Dishes Status Mix"});      
>       }</script>
>
> When i load the page it all works OK, chart shows. I then wrap the Google
> code in my own function and call it (loadHQCharts();) at the end of the
> main script.
>
> <script type="text/javascript"> function loadHQCharts() {
>    // Load the Visualization API and the piechart package.
>    google.load('visualization', '1', {'packages':['corechart']});
>    .
>    . }</script>
>
> The page loads and then it goes blank with an empty BODY and no errors in
> inspect/Firebug. I am using Wordpress if it helps.  Any ideas welcome!
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Chart 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-chart-api.
> For more options, visit https://groups.google.com/d/optout.
>



-- 
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>  -
978-394-1058
[email protected] <[email protected]>   5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton MA

-- 
You received this message because you are subscribed to the Google Groups 
"Google Chart 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-chart-api.
For more options, visit https://groups.google.com/d/optout.

Reply via email to