I'm encountering difficulties with incorporating the Google Gauge chart visualization into my website. The given example code is as follows:
<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);
The code functions correctly on its own when there's a div with the id chart_div in the body. However, each page on my site is loaded via ajax using loadandsetactive and inserted into a content div under a "static" header. When I add the same code to the head section of any of these pages, it doesn't work. There are no errors or indications that the script was even attempted to be loaded. Here's an example of how the pages are loaded into the content div:
<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>
The pages are then loaded into the mentioned content div below the header. The website is close to completion, but I'm struggling to get this gauge to function properly. Any assistance would be greatly appreciated.
EDIT: Just to clarify, once the user logs in, the dashboard gets automatically loaded through ajax where I intend to display the chart in a div. The mypage is a complete HTML file with its relevant tags etc. Regrettably, my proficiency lies more in PHP and HTML/CSS rather than in ajax and jQuery.