I’m stuck trying to solve this. I’m plotting some information that I have in one of my databases. Due my web UI, I’m using Ajax to call another page who make all the rendering stuff. In resume I have profile.php who lets the user select a grafic to render just passing the parameter ref via GET to stats-render.php. This is the partial code in profile.php:
<script>
$(document).ready(function() {
$('tr.table-row').click(function(){
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) {
//clearInterval(loading);
$('div.stats-data').html(d);
}});
$('div.stats-data').html('<center><img src="css/img/ajax-loader.gif" alt="loader_IMG" /><br>Rendering your stats</center>');
//var loading = setInterval(function() { $('div.stats-data')[0].innerHTML += '.' }, 1000);
});
});
</script>
In the other side, in stats-render.php I’m using the Google chart framework, that if you call the file stats-render.php directly it works just fine, the partial code is:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'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 the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Number');
data.addColumn('number', 'Visits');
<?php
$salida = "";
$fgmembersite->DBLogin();
$result=mysql_query("SELECT DATE(datetime), COUNT(1) as numVisits FROM stats_ram WHERE type='profile_visit' AND user_url = 'xxx' GROUP BY DATE(DATE_SUB(datetime, INTERVAL 1 DAY))");
echo "data.addRows([";
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$salida = $salida . "['".$row['DATE(datetime)']."', ".$row['numVisits']."],";
}
$salida = rtrim($salida, ",");
echo $salida . "]);";
?>
// Set chart options
var options = {'title':'Your CV visits by day', 'width':'100%', 'height':300, colors: ['#c7cfc7'], titleTextStyle: {color: '#5c5c5c'}};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
//chart.draw(data, {width: 600, height: 266, colors: ['#c7cfc7'], legendTextStyle: {color:'#666666'}0});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
So, when you use profile.php to load stats-render.php it won’t work, also the Chrome developer console will prompt you this:
Uncaught ReferenceError: google is not defined
(anonymous function)
e.extend.globalEvaljquery-1.7.min.js:2
e.extend.globalEvaljquery-1.7.min.js:2
brjquery-1.7.min.js:2
e.extend.eachjquery-1.7.min.js:2
f.fn.extend.domManipjquery-1.7.min.js:4
f.fn.extend.appendjquery-1.7.min.js:3
f.fn.extend.htmljquery-1.7.min.js:4
$.ajax.successprofile.php:97
f.Callbacks.njquery-1.7.min.js:2
f.Callbacks.o.fireWithjquery-1.7.min.js:2
wjquery-1.7.min.js:4
f.support.ajax.f.ajaxTransport.send.djquery-1.7.min.js:4
I’m very sure that the Ajax call is working, and I’m very sure that stats-render.php is working also fine. So, any ideas?
You should be using
$.getScript(). It’s designed specifically for this.