Hello,
I have been working this problem for a week, trying every variation I find
on Stackoverflow and have read the Google Visualization documentation over
and over. I just cant get this to load, and I think it has to do with my
ajax call for JSON.
PHP Script (separate file from the HMTL)
<?php
$username = "XXX";
$password = "XXX";
$hostname = "localhost";
$db = "XXX";
//connection to the database
$conn = mysql_connect($hostname, $username, $password);
if( ! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT * FROM XXX';
mysql_select_db( $db );
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
$data = array();
while($row = mysql_fetch_assoc($retval)) {
$data[] = $row;
}
$theData = array('Records' => $data);
$myData = json_encode($theData);
// JSON Error Check
if(json_last_error == 0){
echo $myData;
} else {
echo "JSON Error: " .json_last_error()
}
mysql_free_result($retval);
mysql_close($conn);
PHP echoes a (simplified) JSON result of
{"Records":[{"ID":"1","Value":"200"},{"ID":"2","Value":"600"}]}
My HTML (and Javascript) is as follows
<!doctype html>
<html>
<head>
<!--Visualization Loader-->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<!--Load the AJAX API-->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the table package.
google.charts.load('current', {'packages':['table']});
// Set the table callback.
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
//Call server for JSON
var jsonData = $.ajax({
url: "/Projects/Report/GetData.php",
dataType: "json",
async: false
}).responseText;
// --- Create a DataTable and populate with JSON value.
var myData = new google.visualization.DataTable(jsonData);
// Instantiate HTML div element.
var mytable = new
google.visualization.Table(document.getElementById('table_div'));
// Draw the Chart Table object.
mytable.draw(myData, {showRowNumber: true, width: '90%',
height: '90%'});
}
</script>
</head>
<body>
<!--Div that will hold the Table-->
<div id="table_div"></div>
</body>
</html>
I get errors about depreciation of Ajax async: false warnings, and a page
of blank results (except the CSS of the div tag has a underline showing). I
have tried to use json.parse and arraytodatatable, but then I get errors
saying the columns do not have headings.
Can anyone help me figure out what I am doing wrong?
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/b5b68abc-73b4-4bcc-9e3d-3b1d32bb22a6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
