Question

I’m having some issues integrating the Google Gauge chart visualization into my site. The example code they give is:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 80],
      ['CPU', 55],
      ['Network', 68]
    ]);

    var options = {
      width: 400, height: 120,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);

By itself, this code works fine when a div with the id chart_div is in the body. However, each page on my site is called by ajax using loadandsetactive and loaded into a content div under a “static” header. When the same code is entered into the head of any of these pages, it fails to load. There is no error, no blank chart, or any other sign that the script even attempted to load. An example of how the pages are loaded into a content div is:

        <li class="menuItem" id="mypage">
    <a href="#" onclick="loadAndSetActive('mypage.html', '#content', '#mypage');" >
    <img src="myimage.png" width="100%" height="auto"/>My Page</a></li>

Pages are then loaded into the aforementioned content div under the header. The site is almost completely finished, but I just can’t seem to get this gauge to work. Any help would be greatly appreciated.

EDIT: To clarify, once the user logs in, the ajax call automatically loads the dashboard where I am trying to draw the chart in a div. The mypage is a full html file with it’s own tag etc. Unfortunately, my PHP and HTML/CSS are much better than my ajax and jquery.

Answer 1

Instead of using setOnLoadCallback try calling it inside the google.load itself, below is the code snippet:

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