Load PHP-file including Google Chart using jQuery: Chart never shows up!
I already created a PHP file that shows me some calculated values as well as a visualization of this data using Google Chart. If I just directly open this PHP everything works fine.
So my next step is to load this PHP(including the google Chart) into another Page when clicking a button by using jQuery. The issue I have is that the calculated values show up without problems but the chart doesn't. Using Firebug I found out that there has to be a problem with the loading of google's API which happens inside the PHP-file (which is needed for the chart visualization). I already did various attempts to load the API inside the page that calls the PHP-file (or even using jquerys getscript) but without success.
Has anybody got an idea what I am missing here, or how i could get this chart to show up?
Thanks a lot for your help!
Here is the PHP-file (without the PHP-part):
<html>
<head>
<title>Analyseergebnis</title>
<!--Load the AJAX API-->
<!-- +++++++++++++++++++ Definition von Google Charts +++++++++++++++++++++ -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div style='width:300px; text-align:center; background-color:lightgrey; padding-top:5px; padding-bottom:5px;'><b>A N A L Y S E E R G E B N I S</b></div>
<p />
<!-- +++++++++++++++++++ HERES THE PHP PART - NOT SHOWN HERE +++++++++++++++++++++ -->
.....................
<!-- +++++++++++++++++++ Aufruf des Diagramms +++++++++++++++++++++ -->
<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 our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', <?php echo str_replace(',', '.', $row_wiesen[0]); ?>], // Konversion da Google Charts als ',' nur '.' akzeptiert
['Acker', <?php echo str_replace(',', '.', $row_acker[0]); ?>],
['versiegelt', <?php echo str_replace(',', '.', $row_versieg[0]); ?>],
['Laubwald', <?php echo str_replace(',', '.', $row_lwald[0]); ?>],
['Nadelwald', <?php echo str_replace(',', '.', $row_nwald[0]); ?>],
['Wasser', <?php echo str_replace(',', '.', $row_wasser[0]); ?>],
['Unklassifiziert', <?php echo str_replace(',', '.', $row_na[0]); ?>]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right', chartArea:{width:"90%", height:"85%"}, pieSliceText:"none"});
}
</script>
<div id="gchart"></div>
</body>
</html>
And here is where I call the PHP-file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#map {
width: 800px;
height: 475px;
border: 1px solid grey;
}
</style>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
++++++++++ HERE COMES THE OPENLAYERSPART - NOT SHOWN HERE +++++++++++
</head>
<body onload="initmap()">
<table>
<tr>
<td>
<div id="map"></div>
</td>
<td valign="top">
<div id="div1" style="display:visible;">
<button id="ajaxloadlink" type="submit">A N A L Y S E starten</button>
</div>
<div id="ajaxcontent" style="font-family:Verdana; font-size:9pt">
- Bitte zuerst Suchpolygone erfassen! -
</div>
<div id="div2" style="display:none; text-align:right;">
<input type="button" id="ajaxbacklink" value="NEUE Analyse starten" onclick="clearLayerVector()">
</div>
</td>
</tr>
</table>
<script type="text/javascript">
$.ajaxSetup ({
cache: false // Browser soll den AJAX-Befehl nicht cachen, da PHP-file mehrmals hintereinander abgerufen wird
});
$.toggle = function(query)
{
$(query).toggle("fast");
}
$("#ajaxloadlink").click(function(){
$.toggle('#div1');
$("#ajaxcontent").empty().html('<div style="width:300px; text-align:center;"><p><img src="../web/loader.gif" /></p></div>');
$("#ajaxcontent").load("../web/abfrage.php");
$.toggle('#div2');
});
$("#ajaxbacklink").click(function(){
//document.getElementById('ajaxcontent').style.display = "none";
$("#ajaxcontent").empty().html('<div id="ajaxcontent">- Bitte zuerst Suchpolygone erfassen! -</div>');
$.toggle('#div2');
$.toggle('#div1');
});
</script>
</body>
</html>
Thanks a lot for your help!
Thanks for your advice. The only thing is I am not that big of an jQuery programmer and I am not really sure what's the escence of the post you linked to. I ran some more test with a very simplified version only showing the google chart when hitting a button (code is shown below) but without success. It still seems that the JScript code isn't recognized. The only thing I noticed is that is essential that the jquery-code that has the functions in it has to be AFTER the definition of the -tag in the source code.
Here come the two simple files trying to load the chart (I guess it should be easy to reproduce the error I get):
gchart.htm - That's the file that will be called by jQuery - if you run ONLY this file on its own you'll see that the chart is shown without problems:
<html>
<head>
<title>Testwiese</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></sc开发者_开发技巧ript>
<script type="text/javascript" src="gchart.js"></script>
<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 our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', 2],
['Acker', 3],
['versiegelt', 6],
['versiegelt', 6]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right', chartArea:{width:"90%", height:"85%"}, backgroundColor: 'white', pieSliceText:"none"});
}
</script>
</head>
<body>
<div id="gchart"></div>
</body>
</html>
and gchart_test.htm - the file with the button that calls the file above:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<input type="button" id="gshow" value="Test Gchart">
<div id="gchart"></div>
<script type="text/javascript">
// load() functions
var loadUrl = "gchart.htm";
$("#gshow").click(function(){
$("#gchart").load(loadUrl);
});
</script>
</body>
</html>
I am sorry but at this point I have no clue what to read out of the link you send me or what to change in my files. If you run these two files you will see that the loading process crashes and weird as it is the page is attempting to contact google...
Might it be a problem that Google Charts itself is obviously using the same technique to overwrite a div-tag in order to display the chart?
The thing is I separate the code in 2 parts FOR PURPOSE. I want to load gchart_test.htm INTO gchart.htm because in my project gchart.htm is only an example of a much bigger site where I want to lead the google chart into. And in gchart.htm there are only 6 lines of code in order to make it as simple as possible for others to see what I am trying to get down. So the code is just a simplification so everybody could reproduce the error I get.
Take look on this jquery load() strips script tags - workaround?. I think your problem is the same.
The script which supposed to create the chart is not executed, because it is removed by jQuery.load().
gchart.html:
<html>
<head>
<title>Testwiese</title>
</head>
<body>
<div id="gchart"></div>
</body>
</html>
gchart_test.html:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="gchart.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
</script>
</head>
<body>
<input type="button" id="gshow" value="Test Gchart">
<div id="gchart"></div>
<script type="text/javascript">
// load() functions
var loadUrl = "gchart.htm";
$("#gshow").click(function(){
$("#gchart").load(loadUrl, function(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Wiesen', 2],
['Acker', 3],
['versiegelt', 6],
['versiegelt', 6]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart'));
chart.draw(data, {width: 300, height: 200, colors:['#006400','#CD853F','#C0C0C0','#228B22','#556B2F','#1E90FF','#000000'], legend: 'right', chartArea:{width:"90%", height:"85%"}, backgroundColor: 'white', pieSliceText:"none"});
});
});
</script>
</body>
</html>
I think you should combine these files. Theres no reason to separate ~6 lines of html.
加载中,请稍侯......
精彩评论