HELP! Cant get Table Chart to load with mySQL call.

37 views
Skip to first unread message

Joseph LeRoy

unread,
Jun 28, 2016, 4:13:05 PM6/28/16
to Google Visualization API
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?






fall lay

unread,
Jun 28, 2016, 11:28:32 PM6/28/16
to google-visua...@googlegroups.com

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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.

Reply all
Reply to author
Forward
0 new messages