Google Chart loads on Page Refresh

Question

My google chart works fine, but my page appears blank the first time I trigger to show the chart. Then when I refresh the page the chart and everything else appear fine. I am new to this, can you help me figure this out. My code is as follows:

My chart code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChart);

 function drawChart() {

 var data = google.visualization.arrayToDataTable([
 ['Projects', 'Time_Spent'],
  <?php

   $sql = 'SELECT * FROM ost_ticket where staff_id = '.$_GET['uid'].'';
  $res = db_query($sql);
  while($row = db_fetch_array($res)) {

   ?>

     ['<?php echo getProjectID($row['ticket_id']) ?>', <?php echo     getProjectTime($row['ticket_id']) ?>],


  <?PHP } ?>  

]);
var options = {
  title: '',

 legend: {
   position: 'labeled',
   pieSliceText:"value"                                    
},

 pieSliceText: 'label',
   width: 350,
    height: 400,
    chartArea:{left:5,top:20,width:"100%",height:"50%"}
  };

  new google.visualization.PieChart(
    document.getElementById('chart_div')).draw(data, options);
 }

    </script>

Answer 1

I think both google.load and google.setOnLoadCallback call the document.ready method in jquery , which may cause blank HTML if called twice. Try this instead of those two lines.

var options = {packages: ['corechart'], callback : drawChart};
google.load('visualization', '1', options);

Hope it works!